float:left macht Zeilenumbruch im IE

[DwarfNRG]

Ich gestalte derzeit ein Menü mit CSS. Im Firefox und in Opera sieht alles genau so aus wie ich es will. Leider zerschießt der IE das Menü. Der letzte Punkt wird immer in der nächsten Zeile dargestellt. Wenn ich Testweise in der CSS auf float:right stelle, dann wird es auch im IE richtig dargestellt (seitenverkehrt).

Hier meine CSS:

body {
background-image: url(../images/bg1.png);
font-family: Arial, geneva, verdana, arial, sans-serif;
}
#table {
border-collapse:collapse;

}
ul.menu {
padding-left: 3px;
padding-right:0px;
}
#menu {
background-position: 1px;
width:890px;
height:88px;
background-repeat:no-repeat;
background-image: url(../images/menuback.png);

}
#header {
background-image: url(../images/Header.png);
width:900px;
height:266px;
background-repeat:no-repeat;
}

#footer {
background-position: 0px;
background-image: url(../images/Footer.png);
width:888px;
height:64px;
background-repeat:no-repeat;
font-weight:bold;
color:#ffffff;

}

#module {
border-left:2px solid #6a6a6a;
width:287px;
vertical-align:top;

}
#impressum {
vertical-align: top;
padding-left: 10px;
font-size:13px;
}

#contenttable {
width:887px;
padding-left:9px;
background-color: #ffffff;
border-left:3px solid #ff6700;
border-right:3px solid #ff6700;

}
.item1 {
display:block;
background-image: url(../images/Homeactive.png);
width:125px;
height:56px;
text-indent: -2000px;

}
li.item1 {
display:block;
color:#000000;
background-image: url(../images/Homeactive.png);
width:125px;
height:56px;
background-repeat:no-repeat;

}
li.item1#current {
display:block;
color:#ffffff;
background-image: url(../images/Home.png);
width:125px;
height:56px;
background-repeat:no-repeat;

}

li {
  white-space: nowrap;
   padding-right:10px;
float:left;
display:inline;
}
.item1 a {
display:block;
width:125px;
height:56px;
outline:0;

}
.item1 a:hover {
display:block;
width:125px;
height:56px;
outline:0;
background-image: url(../images/Home.png);

}
.item53 {
display:block;
background-image: url(../images/Podactive.png);
width:131px;
height:56px;
text-indent: -2000px;

}
li.item53 {
display:block;
color:#000000;
background-image: url(../images/Podactive.png);
width:131px;
height:56px;
background-repeat:no-repeat;

}
li.item53#current {
display:block;
color:#ffffff;
background-image: url(../images/Pod.png);
width:131px;
height:56px;
background-repeat:no-repeat;

}
.item53 a {
display:block;
width:131px;
height:56px;
outline:0;

}
.item53 a:hover {
display:block;
width:131px;
height:56px;
outline:0;
background-image: url(../images/Pod.png);

}
.item55 {
display:block;
background-image: url(../images/Zutatenactive.png);
width:149px;
height:56px;
text-indent: -2000px;

}
li.item55 {
display:block;
color:#000000;
background-image: url(../images/Zutatenactive.png);
width:149px;
height:56px;
background-repeat:no-repeat;

}
li.item55#current {
display:block;
color:#ffffff;
background-image: url(../images/Zutaten.png);
width:149px;
height:56px;
background-repeat:no-repeat;

}
.item55 a {
display:block;
width:149px;
height:56px;
outline:0;

}
.item55 a:hover {
display:block;
width:149px;
height:56px;
outline:0;
background-image: url(../images/Zutaten.png);

}
.item56 {
display:block;
background-image: url(../images/Rezeptactive.png);
width:128px;
height:56px;
text-indent: -2000px;

}
li.item56 {
display:block;
color:#000000;
background-image: url(../images/Rezeptactive.png);
width:128px;
height:56px;
background-repeat:no-repeat;

}
li.item56#current {
display:block;
color:#ffffff;
background-image: url(../images/Rezept.png);
width:128px;
height:56px;
background-repeat:no-repeat;

}
.item56 a {
display:block;
width:128px;
height:56px;
outline:0;

}
.item56 a:hover {
display:block;
width:128px;
height:56px;
outline:0;
background-image: url(../images/Rezept.png);

}
.item57 {
display:block;
background-image: url(../images/Macheractive.png);
width:133px;
height:56px;
text-indent: -2000px;

}
li.item57 {
display:block;
color:#000000;
background-image: url(../images/Macheractive.png);
width:133px;
height:56px;
background-repeat:no-repeat;

}
li.item57#current {
display:block;
color:#ffffff;
background-image: url(../images/Macher.png);
width:133px;
height:56px;
background-repeat:no-repeat;

}
.item57 a {
display:block;
width:133px;
height:56px;
outline:0;

}
.item57 a:hover {
display:block;
width:133px;
height:56px;
outline:0;
background-image: url(../images/Macher.png);

}
.item58 {
display:block;
background-image: url(../images/Partneractive.png);
width:132px;
height:56px;
text-indent: -2000px;

}
li.item58 {
display:block;
color:#000000;
background-image: url(../images/Partneractive.png);
width:132px;
height:56px;
background-repeat:no-repeat;

}
li.item58#current {
display:block;
color:#ffffff;
background-image: url(../images/Partner.png);
width:132px;
height:56px;
background-repeat:no-repeat;

}
.item58 a {
display:block;
width:132px;
height:56px;
outline:0;

}
.item58 a:hover {
display:block;
width:132px;
height:56px;
outline:0;
background-image: url(../images/Partner.png);

}

Die Seite ist www.kaffeepod-dummy.de.vu
Ich hoffe, dass jemand einen Rat weiß.

[Der Martin]

Hallo,

Ich gestalte derzeit ein Menü mit CSS. Im Firefox und in Opera sieht alles genau so aus wie ich es will. Leider zerschießt der IE das Menü.

das kann ich ihm nicht verdenken, wenn du ihn im Quirks Mode betreibst, in dem er sich wie seine Urahnen verhält - einschließlich Box Model Bug.

Und wenn noch dazu das Dokument nicht valide ist, kann ich ihm schon erst recht keinen Vorwurf machen. Gut, die PHP-Fehlermeldungen, die am Anfang des Quellcodes stehen, meine ich nicht - trotzdem solltest du deren Ursache beseitigen, denn sie verunstalten natürlich das Dokument. Aber auch das nachfolgende Tabellenlayout ist kein valides XHTML. Das wäre aber zunächst mal Voraussetzung, um sich dann mit Feinheiten der Darstellung zu beschäftigen.

Hier meine CSS:
[ sechs Meter Code gelöscht ]
Die Seite ist www.kaffeepod-dummy.de.vu

Nein, da ist nur ein Frameset, eine Hülle. Die tatsächliche Seite ist http://dwarfnrg.dw.funpic.de/kaffeepod/.

So long,
 Martin

[DwarfNRG]

Danke erstmal. Leider kann ich damit jetzt nicht allzu viel anfangen. Die Fehlermeldungen abzuschalten ist kein Problem (liegt am Server), da ich die Seite aber dort nur zum bearbeiten lagere, werde ich diese erst einmal so belassen.

Nun zum Tabellenlayout: Wieso ist es kein valides XHTML? Leider bin ich absoluter Anfänger und komme mit dieser Aussage nur wenig voran.

[ChrisB]

Hi,

Wieso ist es kein valides XHTML?

Wegen der zahlreichen Fehler.

Die Fehlermeldungen abzuschalten ist kein Problem (liegt am Server), da ich die Seite aber dort nur zum bearbeiten lagere, werde ich diese erst einmal so belassen.

Die verursachen aber auch ein paar der Fehler, die der Validator meldet. Sorge also zuerst dafür, dass sie verschwinden, damit du anschliessend die HTML-Ausgabe des Scriptes gezielt überprüfen und bereinigen kannst.

MfG ChrisB

[DwarfNRG]

Ich danke euch für die Tips, werde sie sobald wie möglich umsetzen und dann sehen was passiert und mich ggf. hier melden! Bin aber erstmal bis Sonntag nicht da. Dennoch schon mal Danke!!

[Der Martin]

Hi,

Danke erstmal. Leider kann ich damit jetzt nicht allzu viel anfangen. Die Fehlermeldungen abzuschalten ist kein Problem (liegt am Server), da ich die Seite aber dort nur zum bearbeiten lagere, werde ich diese erst einmal so belassen.

du solltest nicht die Fehlermeldungen abschalten, sondern die Fehlerursache beseitigen.

Nun zum Tabellenlayout: Wieso ist es kein valides XHTML?

Das Tabellenlayout an sich ist, wenn auch von vielen Fachleuten geringschätzig betrachtet, nicht das Problem. Prinzipiell kann auch ein tabellenbasiertes Layout valide sein.

Leider bin ich absoluter Anfänger und komme mit dieser Aussage nur wenig voran.

Du verwendest teilweise Attribute, die es in XHTML nicht gibt, und vergisst stellenweise, Attributwerte in Anführungszeichen zu setzen. Das ist nur, was mir beim flüchtigen Drüberschauen aufgefallen ist. Der Validator wird dir aber gern genauer Auskunft geben.

So long,
 Martin