Falsche Darstellung einer horizontalen Liste im IE

[J. Schroeder]

Guten Tag,

Ich habe ein Design in HTML und CSS gemacht und stehe nun vor dem Problem, dass der Internetexplorer mein horizontales Menue falsch darstellt (Siehe problem.jpg (2))
Normalerweise sieht es so aus, wie es in problem.jpg an erster Stelle zu sehen ist, aber irgendwie rueckt der IE es immer ein.

Den CSS Code hab ich auch mal eingefuegt(format.css).

Es waere schoen, wenn mir jemand helfen koennte.
Die Suchfunktion habe ich benutzt und auc google zu rate gezogen, doch nicht hat geholfen.

Danke schonmal im Vorraus
j schroeder

Anhang:

Screenshot: <a href"http://www.himbeerbeat.de/problem.jpg">problem.jpg</a>

format.css http://www.himbeerbeat.de/format.css (Zentrale .css datei)

[tuxracer]

Hallo J.Schroeder,

wenn ich das richtig Überblicke, hast du das Menü als Liste angelegt.
Da Listen als Blockelement dargestelt werden, also immer untereinander, hast du über float:left versucht die li's in Reihe zu legen.

Richtiger wäre es, wenn du die li's als display:inline definieren würdest, was dazu führen sollte, das die Elemente hintereinander einlaufen und dargestellt werden.
Vermutlich erledigt sich dann auch der Treppeneffekt.

Lies dir dazu bitte mal das Thema hier durch http://css-technik.de/css-examples/219_9/ und suche mal in Selfhtml nach "display" und dem Unterschied zwischen Block Elementen und Inline Elementen. Das sollte dich weiterbringen. :-)

Viele Grüße, tuxracer

Guten Tag,

Ich habe ein Design in HTML und CSS gemacht und stehe nun vor dem Problem, dass der Internetexplorer mein horizontales Menue falsch darstellt (Siehe problem.jpg (2))
Normalerweise sieht es so aus, wie es in problem.jpg an erster Stelle zu sehen ist, aber irgendwie rueckt der IE es immer ein.

Den CSS Code hab ich auch mal eingefuegt(format.css).

Es waere schoen, wenn mir jemand helfen koennte.
Die Suchfunktion habe ich benutzt und auc google zu rate gezogen, doch nicht hat geholfen.

Danke schonmal im Vorraus
j schroeder

Anhang:

Screenshot: <a href"http://www.himbeerbeat.de/problem.jpg">problem.jpg</a>

format.css http://www.himbeerbeat.de/format.css (Zentrale .css datei)

[j.schroeder]

Hallo tuxracer,

Danke fuer deine rasche Antwort.
Ich hab das Menue ja schon als Inline Element definiert, deswegen bin ich ja auch so ratlos.

Es waere schoen, wenn ihr mir weiterhelfn koenntet.

Ich hab den Menuestylesheet mal hier reinkopiert:

/*Anfang Menu*/
#menu ul{
 padding-left:0;
 list-style-type:none;
 background-color:#036;
 color:#FFF;
        float:left;
 width:748px;
 font-family:arial, helvetica, sans-serif;
 margin:0;
        border-bottom:1px solid black;
        top:10px!important;top:15px;
}

#menu ul li a
{
 background-color:#036;
 color:#FFF;
 text-decoration:none;
 float:left;
 border-right:1px solid #fff;
 padding:0.2em 1em;
        display :inline;
        vertical-align: bottom;
}

#menu ul li a:hover
{
 background-color:#369;
 color:#fff;
}
/*Ende Menu*/

[wahsaga]

hi,

Ich hab das Menue ja schon als Inline Element definiert,

Nein, das hast du nicht.

Du hast auch nicht die LI als inline formatiert, wie tuxracer vorschlug (auch wenn ich das für wenig sinnvoll halte).

Du hast lediglich die A innerhalb der LI als inline formatiert - und das wiederum wird dadurch aufgehoben, dass du diese gefloatet hast. float ungleich none impliziert nämlich display:block.

gruß,
wahsaga

[j.schroeder]

hallo wahsaga,

gracias fuer deine Tipps, mit denen und ner Browserweiche funktioniert es jetzt.
Ich wusste nicht, dass float das inline element aufhebt, warum eigentlich?

Beste Gruesse
Johannes