nicht angemeldet
CSS-Menu mit <ul> - Anzeigefehler im IE ?
Hallo liebe Leute,
ich bastle jetzt schon seit 2 Stunden an einem minimalen Menü
herum, welches ich mit Hilfe einer Liste und CSS codiere.
Ich komme einfach nicht weiter ...
http://special-training.de/mambo/index.php?option=content&task=view&id=5&Itemid=29
Die Struktur sehr einfach.
Sie wird im Mozilla einwandfrei dargestellt.
Hier der Code:
<ul id="navlist">
<li class="active"><a href="#" class="images" id="current">Startseite</a></li>
<ul id="subnavlist">
<li><a href="#" class="images">Unterseite</a></li>
<li><a href="#" class="images">Unterseite2</a></li>
</ul>
<li><a href="#" class="images">Unternehmen</a></li>
</ul>
Der IE stellt den "active" Listenpunkt übergroß dar,
sodass (wenn im Style definiert), ein grüner Rahmen, auch um die 2 Herarchie-Ebene der Liste dargestellt wird, obwohl ich als Anzeige display: block , definiert habe, was normalerweise einen Umbruch erzeugen sollte. Ich kann mir die Darstellung nicht erklären.
Es ist eine Listenverschachtelung, die genauso auch in einem Tutorial zu sehen ist (http://css.maxdesign.com.au/listamatic2/vertical05.htm),
welches curioserweise auch im IE einwandfrei dargestellt wird.
Hier die Styles:
/* CSS NAVIGATION */
#navlist {
text-align: left;
font-family: tahoma, Arial, Verdana, Sans-Serif;
font-size: 12px; line-height: 20px; color: #000;
}
#subnavlist {
text-align: left;
font-family: tahoma, Arial, Verdana, Sans-Serif;
font-size: 11px; line-height: 17px; color: #000;
}
ul#navlist {
padding: 0px;
margin: 0px;
}
ul#subnavlist {
padding: 0px;
margin: 0px;
}
.active {
border: 1px solid green;
display: block;
padding: 0px 0px 0px 0px; margin: 0px;
}
#navlist li {
display: block;
background: url(../gfx/n-inactive-bg.gif);
padding: 5px 3px 5px 30px; margin: 0px;
}
#subnavlist li {
display: block;
background: url(../gfx/nsub-inactive-bg.gif);
padding: 2px 3px 3px 30px; margin: 0px;
width: 100%;
}
.subactive {
border: 1px solid black;
display: block;
background: url(../gfx/nsub-active-bg.gif);
padding: 2px 3px 3px 0px; margin: 0px;
}
Vielleicht kennt jemand die Problematik und kann mir weiterhelfen.
ich wäre mehr als dankbar ... mir raucht der Schädel.
Freundliche Grüße,
Sebastian
-
Der IE stellt den "active" Listenpunkt übergroß dar,
Ohne es jetzt durchgelesen zu haben: welches Boxmodel verwendest Du?
-
Hallo,
ich kenne nur den Begriff Boxmodel
und habe auch eine Vorstellung davon, was das ist.
Ich kann dir nicht sagen, welches ich verwende,
da ich nur eins kenne.Ich habe schon überlegt, ob es an dem Doctype liegen könnte,
doch ist der sauber auf XHTML 1.0 transitionla gesetzt
und ich denke, dass es keine Problme machen dürfte.Gruß,
Sebastian-
Hi,
Ich habe schon überlegt, ob es an dem Doctype liegen könnte,
doch ist der sauber auf XHTML 1.0 transitionla gesetzt
und ich denke, dass es keine Problme machen dürfte.daran dürfte es tatsächlich nicht liegen.
Ich sehe zwischen dem Original und Deiner Version auf den ersten Blick drei Unterschiede:
1. falsches HTML bei Dir, wie ja schon gesaght
2. Schriftgröße (hast Du auch Werte wie line-height angepaßt?)
3. umgebende (und eigentlich unnlötige) Tabelle bei Dirändere wenigstens 1. und prüfe 2. bevor Du aufgibst.
freundliche Grüße
Ingo
-
-
-
Hallo,
http://special-training.de/mambo/index.php?option=content&task=view&id=5&Itemid=29
vielleicht liegt es daran:
mfg NAG
--
signatur-
Hallo NAG,
http://special-training.de/mambo/index.php?option=content&task=view&id=5&Itemid=29
vielleicht liegt es daran:
... ja, dass scheint mir auch so ... dummer Weise!
Naja,
nicht alle Tutorials, die einen praktischen und pfiffigen Eindruck machen, sind letztendlich und auf Dauer brauchbar.Ich arbeite lieber mit validem Code, da bin ich meißtens auf der "sichereren" Seite.
Ich werde in diesem Fall wohl auf DIVs umsteigen müssen.
Gruß,
SebastianPS: Wenn jemandem ein Workaround zu der oben beschriebenen Problematik begegnet, würde ich mich freuen, davon zu erfahren!
-
Hallo,
Ich werde in diesem Fall wohl auf DIVs umsteigen müssen.
Nein...
Du musst lediglich die Verschachtelung ändern.
<ul id="main">
<li>main 1</li>
<li>main 2</li>
<li><ul id="sub">
<li>main 3 sub 1</li>
<li>main 3 sub 2</li>
</ul></li>
<li>main 4</li>
</ul>mfg NAG
--
signatur
-
-
-
Hi,
Die Struktur sehr einfach
und falsch.
<ul id="navlist">
<li class="active"><a href="#" class="images" id="current">Startseite</a></li>
<ul id="subnavlist">ul ist in ul nicht erlaubt, weil ul nur li enthalten darf.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
und falsch.
hart, doch richtig!
Leider :-(
Ich habe in der nächsten Antwort auch schon einen Link
zu Validierung der Seite gesehen.
Ich war so begeistert von der Listenlösung,
die ansich einen sehr sauberen Eindruck macht,
dass ich garnicht auf die Idee gekommen bin,
dass der Code nicht sauber ist.Irgendwie doof!
Ich werde dann wohl doch auf divs setzen müssen,
so wie ich es vor dem Listentutorial getan habe.
Das funktioniert auch, doch ist der Code nicht so schön
schlank.
Was mich allerdings wundert, ist , dass die Liste aus dem Tutorial
einwandfrei funktioniert, doch meine kaputt dargestellt wird,
obwohl der Aufbau scheinbar gleich ist.Danke für deinen Hinweis!
Gruß,
Sebastian-
Hi,
Ich werde dann wohl doch auf divs setzen müssen,
Wieso? Du must die Listen nur korrekt schachteln.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Hallo, Sebastian,
Irgendwie doof!
Ich werde dann wohl doch auf divs setzen müssen,
so wie ich es vor dem Listentutorial getan habe.Nein. Wie MudGuard bereits sagte, mußt Du lediglich korrekt schachteln. Das heißt, <ul> muß innerhalb von <li> stehen.
Was mich allerdings wundert, ist , dass die Liste aus dem Tutorial
einwandfrei funktioniert, doch meine kaputt dargestellt wird,
obwohl der Aufbau scheinbar gleich ist.Die Betonung liegt dabei auf "scheinbar", in diesem Tutorial wurde nämlich korrekt geschachtelt.
Deinem ursprünglichen Problem sollte übrigens auch ohne weiteres abzuhelfen sein: Der IE benötigt ein 'display:inline' für 'ul#navlist li'.
Gruß,
Shaddai
-
-