Hallo,
Zu deinem IE7-Problem:
Vielleicht ginge es, wenn du die Navi-ul dort etwas breiter machst und overflow:hidden auf das Navi-Div anwendest. Das ganze solltest du aber möglichst vor anderen Browsern verstecken, da es eigentlich auch ziemlich unschön ist.Es will irgendwie nicht ganz funktionieren.
Hast du das, was ich geschrieben hatte ausprobiert? Ich meinte das so:
<div style="overflow:hidden;">
<ul style="width:150%">
<!--Deine Navi-->
</ul>
</div>
(das Ganze natürlich auslagern und vor (anderen) Browsern verstecken).
Eigentlich müsste sich der Umbruch auf diese Weise verhindern lassen.
So wie ich es jetzt habe ist die Hintergrundfarbe in #nav ul li {} definiert, mit 20% width. Wenn ich das jetzt auf 16% width setzte, fehlt rechts der hintergrund.
Das ist logisch…
Wenn ich den Hintergrund aber in #nav ul definiere, seh ich ihn gar nicht.
…das dagegen nicht! Hast du evtl. vergessen, der Hintergrund eines <li> vorher zu entfernen? Normalerweise müsste das ohne Probleme klappen. Optimal ist es aber so oder so nicht. Probier lieber nochmal meinen anderen Vorschlag.
Bald kenn ich mich nicht mehr aus :-)
Tja, das ist eben das normale Übel eines Webdesigners. Es läuft in allen Browsern ohne Probleme und dann testet man im IE (der ja immer noch meilenweit davon entfernt ist, den Acid 2-Test zu bestehen).
mfg. Daniel