Problem mit display:block / float
Henning
- css
Ich möchte eine Seite mit einem vertikalen Menü rechts erstellen, die Menülinks sollen sich jeweils über die ganze Breite des Menüs erstrecken.
Bei folgendem Code ergibt sich das (mir unerklärliche) Problem, dass mit dem Internet Explorer die Links zwar jeweils auf eine neue Zeile gesetzt werden, sich aber nicht über die ganze Breite des Menüs erstrecken:
<style type="text/css">
div.menu {float:left}
a.hauptlink {display:block}
</style>
<div class="menu">
<a class="hauptlink" href="index.htm">Start</a>
<a class="hauptlink" href="album.htm">Fotoalbum</a>
</div>
<div> Hier der Inhalt.</div>
Mit Firefox und Opera wird hingegen alles wie gewünscht angezeigt.
----------------------------------------------------------------------------------------
Dann habe ich versucht, auf dieser Basis ein aufklappbares Menü zu entwickeln.
Mit dem unteren Code tritt aber das Problem in IE _und_ Firefox auf.
Für den Firefox kann ich a.hauptlink und .menuboxen auf width:100% setzen, und alles wird wie gewünscht angezeigt - aber nicht im IE, dort erstrecken sich die Menülinks dann über die ganze Bildschirmbreite.
<style type="text/css">
div.inhalt {height:100%;}
div.menu {float:left;}
a.hauptlink {display:block;float:left;white-space:nowrap}
.submenu {position:absolute;display:none;z-index:99;margin-right:0;background-color:#fff}
.submenu a {display:block;white-space:nowrap}
.menuboxen {clear:both;float:left}
</style>
<div class="menu">
<div class="menuboxen" onMouseOver="document.getElementById('sub1').style.display='inline';"
onMouseOut="document.getElementById('sub1').style.display='none';">
<a class="hauptlink" href="/">Start</a>
<div id="sub1" class="submenu">
<a href="unterlink1.html">Unterlink 1</a>
<a href="unterlink2.html">Unterlink 2</a>
</div>
</div>
<br clear="all">
<div class="menuboxen" onMouseOver="document.getElementById('sub2').style.display='inline';"
onMouseOut="document.getElementById('sub2').style.display='none';">
<a class="hauptlink" href="album.htm">Fotoalbum</a>
<div id="sub2" class="submenu">
<a href="unterlink1.html">Unterlink 1</a>
</div>
</div>
<br clear="all">
</div>
<div class="inhalt">Hier der Inhalt.</div>
o.O(dankbar für jede Hilfe...)
wenn du den Links per css nen border oder ne background-color gibst, funktioniert es wieder.
Das ist ein bekannter Bug beim IE. Es gibt viele Seiten, die sich mit den unzähligen IE-Bugs beschäftigen.
wenn du den Links per css nen border oder ne background-color gibst, funktioniert es wieder.
Das ist ein bekannter Bug beim IE. Es gibt viele Seiten, die sich mit den unzähligen IE-Bugs beschäftigen.
Das funktioniert leider bei dem Beispiel nicht, weder mit border noch mit background-color tut sich da was... :-/