IE6: CSS Content Verschiebung nach unten

Ich habe das Problem, dass der Internet Explorer die Seite nicht richtig darstellen will.
Alle anderen Browser schon.

Und zwar ist der Content (main) nicht in der Mitte von Navi links und Navi rechts, sondern genau unten drunter.

Ich habe mir die CSS genau angeschaut, aber finde keine Fehler. margin und padding habe ich auch rumgespielt.

Firefox, so wie es aussehen soll:
http://img163.imageshack.us/img163/385/57097006.jpg

Internet Explorer:
http://img260.imageshack.us/img260/8779/72593554.jpg

Hier meine CSS:
[PHP]body {
padding:0;
margin:0;
color:#000000;
font-family: verdana, tahoma, sans-serif;
font-size: 13px;
background-color: #6DBFFB;
background-image: url(/img/hintergrundicon.jpg);
background-repeat: x-repeat;
}
a {
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover {
background-color:inherit;
text-decoration:underline;
color:#303030;
}
h1 {
margin:5px 0 6px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
line-height:50px;
text-align:center;
background:#ffffff url(img/h1.jpg) center no-repeat;
}
h2 {
margin:5px 0 6px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
line-height:50px;
text-align:center;
}
h3 {
font-size:15px;
font-weight:bold;
text-align:center;
}
hr {
border:0;
border-top:solid 3px #6DBFFB;
}

p {
line-height:18px;
}
p2 {
line-height:16px;
}
right {
text-align:right;
}
table td {
padding:3px;
}
#title {
width:945px;
height:126px;
margin-top:8px;
margin-right: auto;
margin-left: auto;
border:4px solid #ffffff;
}
#container {
margin:4px auto 8px auto;
width:950px;
padding:5px;
position:relative;
background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
color:#000000;
border:10px solid #000000;
}
#werbung {
color:000000;
width:120px;
border:0px #000000 solid;
height:600px;
margin-top:5px;
margin-left:0;
margin-right:0;
text-align:center;
float:right;
}
#werbung2 {
background-color:#FFF;
color:000000;
width:120px;
border:4px #000000 solid;
height:auto;
position:absolute;
right:975px;
margin-left:0;
margin-right:0;
float:right;
top:-5px;
text-align:center;
}
#release {
background:#ffffff;
color:000000;
border:0;
position:absolute;
left:975px;
top:-5px;
float:right;
width:auto;
text-align:center;
border:4px #000000 solid;
hight:auto;
}
#sidebar {
float:left;
width:100px;
text-align:center;
margin-top:5px;
margin-left:0;
margin-right:0;
}
#sidebar3 {
float:left;
width:120px;
text-align:center;
margin-top:5px;
margin-left:0;
margin-right:0;
}
#sidebar2 {
float:right;
width:100px;
text-align:center;
margin-top:5px;
margin-left:0;
margin-right:0;
}
#main {
width:715px;
float:right;
margin-right:10px;
margin-left:0;
font-size:13px;
min-height:700px;
}
#main2 {
width:690px;
float:right;
margin-right:10px;
margin-left:0;
font-size:13px;
min-height:700px;
}
#footer {
clear:both;
font-size:12px;
text-align:center;
}
#menu {
width: 100%;
background: #ffffff;
font-family: Verdana;
font-size: 12px;
line-height: 24px;
float: left;
margin-left:0;
margin-right:0;
}
/–Setzt alle Abstände auf „Null“–/

  • {
    margin: 0;
    padding: 0;
    }
    /–formatiert die Themenblöcke–/
    #menu ul {
    float: left;
    width: 135px;
    list-style-type: none;
    }
    /–definiert die Blocküberschriften–/
    #menu h3 {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #000000;
    }
    /–definiert die „Drop-Down-Links“ im Normalzustand–/
    #menu a {
    text-decoration: none;
    display: block;
    text-align: center;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    }
    #menu a:hover {
    background-color:#6DBFFB;
    color:#000000;
    border:2px solid #000000;
    }
    /*
    *verhindert im Zusammenhang mit position absolute bei ul ul
    *eine Höhenvergrößerung von #menu beim Hovern–
    */

#menu li {
position: relative;
}
/–versteckt die „Drop-Down-Links“, solange nicht gehovert wird–/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/–lässt die Dropdown-Links beim Hovern erscheinen–/
#menu ul li:hover ul {
display: block;
}
/–nur für IE-Versionen kleiner gleich 6 erkennbar–/

  • html #menu ul li {
    float: left;
    width: 100%;
    }
    /–nur für IE 7 erkennbar–/

+ html #menu ul li {
float: left;
width: 100%;
}
/
–bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente–*/
html body {
behavior: url(/csshover3-source.htc);
font-size: 100%;
}
html #menu ul li a {
height: 10%;
}
/
–definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich–
/

#menu a.direkt:link {
font-size: 13px;
font-weight: bold;
text-align: center;
color: #ffffff;
border: 2px solid #ffffff;
background: #000000;
}
/–definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich–/

#menu a.direkt:hover {
color: #000000;
background: #6DBFFB;
border: 2px solid #000000;
}
/– Menü 2 –/
.menu2 {
display:block;
text-align:center;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button.jpg) no-repeat;
color:#6DBFFB;
}
.menu2:hover {
background-color:#ffffff;
color:#ffffff;
text-decoration:none;
}
/– Menü 3 –/
.menu3 {
display:block;
text-align:center;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button1.jpg) no-repeat;
color:#F9C5DB;
margin-left:0;
margin-right:0;
}
.menu3:hover {
background-color:#ffffff;
color:#ffffff;
text-decoration:none;
}
.credits {
margin-bottom:0;
margin-left:0;
margin-right:0;
font-size:11px;
background-color:inherit;
color:#aaaaaa;
text-align:center;
}
.credits a {
background-color:inherit;
color:#aaaaaa;
}
small {
font-size:11px;
}
.center {
text-align:center;
}[/PHP]

Quirks- oder Standardmode?

Was meinst du damit? :oops:

Let me google that for you

Gegooglet habe ich ja schon. Aber was willst du mir damit sagen?

Geht es um dieses hier?
[PHP]

[/PHP]

Edit: Wenn ja, wie sollte es richtig sein?

Der IE 6 zeigt im Quirksmodus u.a. den Boxmodellbug und wenn niemand weiß welchen Darstellungsmodus du gewählt hast, kann dir niemand sagen ob nicht vielleicht dieser Bug bei dir greift.

Wie es richtig ist kann dir auch niemand sagen. Du bestimmst in welchem Modus, du die Seite anzeigen lassen willst.

Aber man kann dir natürlich nicht anhand eines Bildes sagen was du falsch machst. Eine URL wäre sinnvoller.

Hm. Soweit ich weiß, habe ich bei Bewusstsein überhaupt keinen Mode gewählt.
Gestern Mittag ging es noch.

Hier der Link: [B]http://tinyurl.com/yb5ubwo[/B]
Sorry für Relink.

du hast den Standardmodus gewählt, was schon mal eine Reihe von Fehlerquellen ausschliesst. Ansonsten sind mir deine Konstrukte zu kompliziert. Da wird ja alles gefloatet, mal links, mal rechts, dann wieder positioniert, mal absolut mal relativ. Ich weiß nicht ob das bei diesem Design unbedingt notwendig wäre.

Daneben läßt sich dein Code nicht validieren, was die Fehlersuche ebenfalls erschwert.

Das alles muss nichts mit deinem Problem zu tun haben, ich vermute eher mal einen Bug des IE, die relativ zahlreich sind. Hier auf der Seite sind ein paar aufgezählt, vielleicht ist deiner dabei: Explorer Exposed!

Hm.
Also die linke Navi muss ich ja links floaten?
Die rechte nach rechts.
Main hab ich rechts gefloatet. Vielleicht ist das überflüssig.

Ich schau mal weiter.

Edit:

Ich hatte ein Problem mit der Werbe- und Releasebox, deswegen sollte ich den Container relavitieren und die beiden Boxen absolute; eingeben, sonst verschieben die sich über den Inhalt der Seite.

Hallo.

Also bei mir im IE8 siehts so aus wie bei deinem Firefox Screenshot ausser das ich die beiden Boxen links und rechts nicht sehen kann.

Zu der linken kann ich scrollen zu der rechten nicht. Du solltest vielleicht bedenken das nicht alle Leute den selben Viewpoint haben wie du.

Gruss
Elroy

Also die Contentverschiebung habe ich hinbekommen.
Es lag irgendwie an einem Mischmasch von margin und float.

Hier die jetzige CSS zum Vergleich:
[PHP]body {
padding:0;
margin:0;
color:#000000;
font-family: verdana, tahoma, sans-serif;
font-size: 13px;
background-color: #6DBFFB;
background-image: url(/img/hintergrundicon.jpg);
background-repeat: repeat;
}
a {
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover {
background-color:inherit;
text-decoration:underline;
color:#303030;
}
h1 {
margin:5px 0 6px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
line-height:50px;
text-align:center;
background:#ffffff url(/img/h1.jpg) center no-repeat;
color:#000000;
}
h2 {
margin:4px 0 3px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
text-align:center;
}
h3 {
font-size:15px;
font-weight:bold;
text-align:center;
}
hr {
border:0;
border-top:solid 3px #6DBFFB;
}
p {
line-height:18px;
}
p2 {
line-height:16px;
}
right {
text-align:right;
}
big {
color:#4169e1;
background-color:#ffffff;
}
table td {
padding:1px 0 1px 0;
}
#title {
width:945px;
height:126px;
margin-top:8px;
margin-right: auto;
margin-left: auto;
border:4px solid #ffffff;
}
#container {
margin:4px auto 8px auto;
width:950px;
padding:5px;
position:relative;
background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
color:#000000;
border:10px solid #000000;
}
#werbung {
color:#000000;
background-color:#ffffff;
width:120px;
border:0px #000000 solid;
height:600px;
margin-top:5px;
margin-left:0;
margin-right:0;
text-align:center;
float:right;
}
#werbung2 {
background-color:#FFF;
color:#000000;
width:120px;
border:4px #000000 solid;
height:auto;
position:absolute;
right:975px;
margin-left:0;
margin-right:0;
float:right;
top:-5px;
text-align:center;
}
#release {
background:#ffffff;
color:#000000;
position:absolute;
left:975px;
top:-5px;
float:right;
width:auto;
text-align:center;
border:4px #000000 solid;
height:auto;
}
#sidebar {
float:left;
width:100px;
text-align:center;
margin-left:0;
margin-right:0;
}
#sidebar3 {
float:left;
width:120px;
text-align:center;
margin-left:0;
margin-right:0;
}
#sidebar2 {
float:right;
width:100px;
text-align:center;
margin-left:0;
margin-right:0;
}
#main {
width:715px;
margin:auto;
font-size:13px;
min-height:700px;
}
#main2 {
width:670px;
margin:auto;
font-size:13px;
min-height:700px;
}
#footer {
clear:both;
font-size:12px;
text-align:center;
}
#menu {
width: 100%;
background: #ffffff;
color: #ffffff;
font-family: Verdana;
font-size: 12px;
line-height: 24px;
float:left;
margin:0;
}
/–Setzt alle Abstände auf „Null“–/

  • {
    margin: 0;
    padding: 0;
    }
    /–formatiert die Themenblöcke–/
    #menu ul {
    float: left;
    width: 135px;
    list-style-type: none;
    }
    /–definiert die Blocküberschriften–/
    #menu h3 {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #000000;
    }
    /–definiert die „Drop-Down-Links“ im Normalzustand–/
    #menu a {
    text-decoration: none;
    display: block;
    text-align: center;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    }
    #menu a:hover {
    background-color:#6DBFFB;
    color:#000000;
    border:2px solid #000000;
    }
    /*
    *verhindert im Zusammenhang mit position absolute bei ul ul
    *eine Höhenvergrößerung von #menu beim Hovern–
    */

#menu li {
position: relative;
}
/–versteckt die „Drop-Down-Links“, solange nicht gehovert wird–/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/–lässt die Dropdown-Links beim Hovern erscheinen–/
#menu ul li:hover ul {
display: block;
}
/–nur für IE-Versionen kleiner gleich 6 erkennbar–/

  • html #menu ul li {
    float: left;
    width: 100%;
    }
    /–nur für IE 7 erkennbar–/

+ html #menu ul li {
float: left;
width: 100%;
}
/
–bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente–*/
html body {
behavior: url(/csshover3-source.htc);
font-size: 100%;
}
html #menu ul li a {
height: 10%;
}
/
–definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich–
/

#menu a.direkt:link {
font-size: 13px;
font-weight: bold;
text-align: center;
color: #ffffff;
border: 2px solid #ffffff;
background: #000000;
}
/–definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich–/

#menu a.direkt:hover {
color: #000000;
background: #6DBFFB;
border: 2px solid #000000;
}
/– Menü 2 –/
.menu2 {
display:block;
text-align:center;
float:none;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button.jpg) no-repeat;
color:#6DBFFB;
}
.menu2:hover {
color:#ffffff;
background-color:#ffffff;
text-decoration:none;
}
/– Menü 3 –/
.menu3 {
display:block;
text-align:center;
width:100px;
height:38px;
float:none;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button1.jpg) no-repeat;
color:#F9C5DB;
}
.menu3:hover {
color:#ffffff;
background-color:#ffffff;
text-decoration:none;
}
.credits {
margin-bottom:0;
margin-left:0;
margin-right:0;
font-size:11px;
background-color:inherit;
color:#aaaaaa;
text-align:center;
}
.credits a {
background-color:inherit;
color:#aaaaaa;
}
small {
font-size:11px;
}
.center {
text-align:center;
}
[/PHP]
Elroy: Hast du einen Vorschlag?
Sobald jemand einen anderen Viewport hat (kleineren), verschwindet die linke Box ganz und zu der Rechten kann man nur scrollen.

Das alte Problem ist weitgehenst gelöst, ein neuer taucht auf.
Jetzt verschiebt sich die Homepage nach links, als wäre sie linksbündig.
Aber auch nur bei den Downloads.

Also einfach mal einen Künstler anklicken, weiter unten einen Song anklicken. Dann im neuen Fenster ist ein riesen durcheinander.

Natürlich wieder nur im IE.

CSS:
[PHP]body {
padding:0;
margin:0;
color:#000000;
font-family: verdana, tahoma, sans-serif;
font-size: 13px;
background-color: #6DBFFB;
background-image: url(/img/hintergrundicon.jpg);
background-repeat: repeat;
}
a {
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover {
background-color:inherit;
text-decoration:underline;
color:#303030;
}
a img {
border:0;
}
right {
text-align:right;
}
h1 {
margin:5px 0 6px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
line-height:50px;
text-align:center;
background:#ffffff url(/img/h1.jpg) center no-repeat;
color:#000000;
}
h2 {
margin:4px 0 3px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
text-align:center;
}
h3 {
font-size:15px;
font-weight:bold;
text-align:center;
}
hr {
border:0;
border-top:solid 3px #6DBFFB;
}
p {
line-height:18px;
}
p2 {
line-height:16px;
}
right {
text-align:right;
}
big {
color:#4169e1;
background-color:#ffffff;
}
table td {
padding:1px 0 1px 0;
}
#title {
width:945px;
height:126px;
margin-top:8px;
margin-right: auto;
margin-left: auto;
border:4px solid #ffffff;
}
#container {
margin:4px auto 8px auto;
width:950px;
padding:5px;
position:relative;
background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
color:#000000;
border:10px solid #000000;
}
#werbung {
color:#000000;
background-color:#ffffff;
width:120px;
border:0px #000000 solid;
height:600px;
margin:0;
text-align:center;
float:right;
}
#werbung2 {
background-color:#FFF;
color:#000000;
width:120px;
border:4px #000000 solid;
height:auto;
position:absolute;
right:973px;
margin:0;
top:-5px;
text-align:center;
}
#release {
background:#ffffff;
color:#000000;
position:absolute;
left:973px;
top:-5px;
padding:2px;
margin:0;
width:auto;
text-align:center;
border:4px #000000 solid;
height:auto;
}
#release img {
margin-top:5px;
margin-bottom:5px;
border:0;
}
#sidebar {
float:left;
width:100px;
text-align:center;
margin:0;
}
#sidebar2 {
float:right;
width:100px;
text-align:center;
margin:0;
}
#main {
width:720px;
margin:auto;
font-size:13px;
min-height:700px;
}
#footer {
clear:both;
font-size:12px;
text-align:center;
}
#menu {
width: 100%;
background: #ffffff;
color: #ffffff;
font-family: Verdana;
font-size: 12px;
line-height: 24px;
float:left;
margin:0;
}
/–Setzt alle Abstände auf „Null“–/

  • {
    margin: 0;
    padding: 0;
    }
    /–formatiert die Themenblöcke–/
    #menu ul {
    float: left;
    width: 135px;
    list-style-type: none;
    }
    /–definiert die Blocküberschriften–/
    #menu h3 {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #000000;
    }
    /–definiert die „Drop-Down-Links“ im Normalzustand–/
    #menu a {
    text-decoration: none;
    display: block;
    text-align: center;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    }
    #menu a:hover {
    background-color:#6DBFFB;
    color:#000000;
    border:2px solid #000000;
    }
    /*
    *verhindert im Zusammenhang mit position absolute bei ul ul
    *eine Höhenvergrößerung von #menu beim Hovern–
    */

#menu li {
position: relative;
}
/–versteckt die „Drop-Down-Links“, solange nicht gehovert wird–/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/–lässt die Dropdown-Links beim Hovern erscheinen–/
#menu ul li:hover ul {
display: block;
}
/–nur für IE-Versionen kleiner gleich 6 erkennbar–/

  • html #menu ul li {
    float: left;
    width: 100%;
    }
    /–nur für IE 7 erkennbar–/

+ html #menu ul li {
float: left;
width: 100%;
}
/
–bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente–*/
html body {
behavior: url(/csshover3-source.htc);
font-size: 100%;
}
html #menu ul li a {
height: 10%;
}
/
–definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich–
/

#menu a.direkt:link {
font-size: 13px;
font-weight: bold;
text-align: center;
color: #ffffff;
border: 2px solid #ffffff;
background: #000000;
}
/–definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich–/

#menu a.direkt:hover {
color: #000000;
background: #6DBFFB;
border: 2px solid #000000;
}
/– Menü 2 –/
.menu2 {
display:block;
text-align:center;
float:none;
margin:auto;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button.jpg) no-repeat;
color:#6DBFFB;
}
.menu2:hover {
color:#ffffff;
background-color:#ffffff;
text-decoration:none;
}
/– Menü 3 –/
.menu3 {
display:block;
text-align:center;
width:100px;
height:38px;
float:none;
margin:auto;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button1.jpg) no-repeat;
color:#F9C5DB;
}
.menu3:hover {
color:#ffffff;
background-color:#ffffff;
text-decoration:none;
}
.credits {
margin-bottom:0;
margin-left:0;
margin-right:0;
font-size:11px;
background-color:inherit;
color:#aaaaaa;
text-align:center;
}
.credits a {
background-color:inherit;
color:#aaaaaa;
}
small {
font-size:11px;
}
.center {
text-align:center;
}
[/PHP]

Hier ein Beispiel: [B]http://tinyurl.com/yfpmmo5[/B]

Startseite: [B]http://tinyurl.com/yb5ubwo[/B]
Hier funktionierts, auch alle anderen Seiten, außer Downloads.

Ich glaube, den Fehler gefunden zu haben.

Es lag an einem Javascript.
Folgender war drin:
[PHP][/PHP]Den habe ich rausgenommen und siehe da. Es funktioniert.

Edit: Okay, jetzt kommt aber ein Fehler, wenn ich einen Song downloaden will.
Wenn ich die Fehlermeldung bestätige, komm trotzdem der Download-Dialog.

Anscheinend muss das drin bleiben, aber irgendwie noch modifiziert werden.