CSS: display:block -> IE
DasMan
- css
Hallo
Habe mittels CSS einen Navigation erstellt. Diese Navigation besteht aus 5 Boxen mit abgerundendet Ecken (CSS Tutorial).
Alle 5 Boxen sollen nebene einander auf einer Linie stehen.
Im Firefox wird dies auch so dargestellt. Im IE jedoch untereinander.
Der Grund dafür ist die Verwendung von display:block;. Der IE macht korrekterweise darum einen Umbruch und zieht die Box über die ganze Seite.
Wie kann ich das verhindern / umgehen? Gibt es dafür einen Trick? Mittels <li> verschachteln?
Hier meien Codes:
CSS:
-------------------------
#nav{
width:60em;
height: 1.8em;
line-height:1.8em;
margin: auto;
padding: auto;
border: 1px solid white;
}
.nav_box{
float: left;
height: 0.6em;
background-color: transparent;
border: 1px solid white;
}
.nav_space{
width: 2.1em;
}
.navbox {background: #5571b1; text-align: center; }
.navbox .top, .navbox .bottom {display:block;background: #FFFFFF;}
.navbox .top b, .navbox .bottom b
{display: block; height: 0.06em; overflow: hidden; background: #5571b1;}
.navbox .nav1 {margin: 0 0.30em;}
.navbox .nav2 {margin: 0 0.18em;}
.navbox .nav3 {margin: 0 0.12em;}
.navbox .top .nav4, .navbox .bottom .nav4
{margin: 0 0.06em;;height: 0.06em;}
-------------------------
HTML:
-------------------------
<div id="nav">
<div class="nav_box">
<div class="navboxAct" id="navbox_Supply"><b class="top"><b class="nav1"></b><b class="nav2"></b><b class="nav3"></b><b class="nav4"></b></b>
<a href="">Link</a>
<b class="bottom"><b class="nav4"></b><b class="nav3"></b><b class="nav2"></b><b class="nav1"></b></b></div>
</div>
<div class="nav_box"><div class="nav_space"></div></div>
<div class="nav_box">
<div class="navboxAct" id="navbox_Supply"><b class="top"><b class="nav1"></b><b class="nav2"></b><b class="nav3"></b><b class="nav4"></b></b>
<a href="">Link</a>
<b class="bottom"><b class="nav4"></b><b class="nav3"></b><b class="nav2"></b><b class="nav1"></b></b></div>
</div>
usw.
</div>
-------------------------
Hallo zusammen,
Der Grund dafür ist die Verwendung von display:block;. Der IE macht korrekterweise darum einen Umbruch und zieht die Box über die ganze Seite.
Wie kann ich das verhindern / umgehen? Gibt es dafür einen Trick? Mittels <li> verschachteln?
Eigentlich mit float: und Breitenangabe...
Hast Du das schon probiert? Kann es derzeit nicht selber ausprobieren...
Viele Grüße,
Marc.
Hallo Marc
Danke, das war der Grund.....
Gruss