PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : 1 Pixel hohe weiße Zeile im IE zwischen Hintergrundgrafiken



mamue
06-11-2006, 08:38
Hallo,
ich habe eine Navigationsleiste, die ich mit kleinen gifs abgerundet habe. Dazu habe ich das gesamte div in drei Bereiche geteilt:


<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:


#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.de:8080/opencms/opencms/tanzschule-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

7.e.Q
07-11-2006, 11:39
Woran das jetzt im Detail liegt, kann ich dir so auf die Schnelle nicht sagen, aber eines ist sicher. Der IE ist für's standardkonforme Webdesign völlig ungeeignet, da er, wie es Software von MS so oft gern tut, in Sachen Web-Standard sein eigenes Süppchen kocht.

undefined
07-11-2006, 11:52
Genauso schaut's aus. Der IE Interpretiert deine CSS nicht Vollständig weil er Probleme mit CSS2 hat.
z.B: ist background-position und text-indent CSS2

Du hast aber eine Möglichkeit.


<head>
<title></title>
<!--[ifltIE6]>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
<![endif]-->
</head>

nur der IE reagiert darauf.

mamue
11-11-2006, 15:31
Besten Dank!
Irgendwie ist das Problem jetzt scheinbar weg. Ich glaube, es lag möglicherweise an einem fehlenden "display: block;". Ich sage "scheinbar" deshalb, weil ich nur über wenige verschiedene Browser verfüge (IE 6/7 & FF 1.5/2).

mamue