1 Pixel hohe weiße Zeile im IE zwischen Hintergrundgrafiken
Hallo,
ich habe eine Navigationsleiste, die ich mit kleinen gifs abgerundet habe. Dazu habe ich das gesamte div in drei Bereiche geteilt:
Code:
<div id="spezifikumNavigation" >
<div class="navigationTop">
die top-Grafik, ein 200px breiter, 15px hoher Balken, an den Ecken rund.
</div>
<div class="navigationMiddle">
Als Hintergrund ein 200px breiter Balken.
Navigationsleiste steht hier (ul/li)
</div>
<div class="navigationBottom">
die Bottom-Grafik, fast genau wie top, nur anders herum.
</div>
</div>
Zwischen dem mittleren Teil und dem Oberen ist im IE6 ein ein Pixel hoher, weißer Streifen zu sehen. Im IE 7 übrigens nicht, genausowenig im FF >= 1.5.
Die divs sind im CSS so definiert:
Code:
#html, body {
margin:0;
padding:0;
height:100%;
}
body {
background-color:white;
color:black;
font-family:Verdana,sans-serif;
}
.navigationBottom {
position:absolute;
top:490px;
left:11px;
width:250px;
height:55px;
display: block;
background-image: url(navigationBottom.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
.navigationMiddle {
position:absolute;
top:15px;
left:0px;
width:250px;
display: block;
color:rgb(160,32,160);
}
.navigationTop {
position:absolute;
top:0px;
left:0px;
width:250px;
height:15px;
display: block;
background-image: url(naviagtionTop2.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#spezifikumNavigation {
position:absolute;
top:86px;
left:5px;
width:250px;
height:500px;
overflow:hidden;
background-image: url(navigationMiddle.gif);
background-repeat: repeat-y;
background-position: 11px;
background-color:rgb(255,255,255);
color:rgb(160,32,160);
text-indent: 15px;
}
Darf man hier eigentlich URLs posten? http://http://www.tanzschule-hellwig...chule-hellwig/
Kann mir jemand einen Hinweis darauf geben, was ich falsch gemacht habe? Hätte ich irgendwo die "line-height" setzen müssen, oder woran mag das liegen?
Danke,
mamue
