✔ Box Modell: height verursacht Fehldarstellung beim mittleren DIV

[fanste]

Hi,

Wie der Titel schon sagt, verursacht die Eigenschaft height einen Fehler im IE beim mittleren DIV.

.navi_left_hc {
width:150px;
height: 41px;
}
.navi_left_hl {
background-image:url(images/head_left.jpg);
width: 42px;
height: 100%;
float: left;
 
}
.navi_left_hm {
background-image:url(images/head_middle.gif);
height:100%; 
margin: 0 27px 0 39px;
}
.navi_left_hr {
background-image:url(images/head_right.jpg);
width: 30px;
height: 100%;
border: none;
float: right;
}

<div class="navi_left_hc">
<div class="navi_left_hl">s</div>
<div class="navi_left_hr">s</div>
<div class="navi_left_hm">s</div>
</div>

Zwischen Links & Mitte sowie zwischen Mitte & Rechts ensteht ein Spalt, der sich nicht schließen lässt. Ich könnte margin auf 0 setzen und es würde sich absolut NICHTS ändern.
Sobald ich die Höhe bei "navi_left_hm" 'rausnehme geht alles wunderbar, nur die Höhe stimmt nicht mehr.

Gibts dafür einen Workaround oder muss ich da nun mit pfuschen anfangen und in den mittleren DIV nochmal ein Element legen, welches dann die besagt Höhe (41 Pixel) hat?

Gruß
fanste

 

[Maik]

Hi,

hier macht sich im IE6 der IE6 Three Pixel Gap-Bug bemerkbar, der dann zum Vorschein kommt, sobald die umfliessende Box (in deinem Fall .navi_left_hm) eine Höhendeklaration besitzt.

Webmaster-FAQ -> CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?

Lösung im vorliegenden Fall:

.navi_left_hl {
background-image:url(images/head_left.jpg);
width: 42px;
height: 100%;
float: left;
margin-right:0 !important; /* Für moderne Browser */
margin-right:-3px; /* Für IE6 */
}

.navi_left_hr {
background-image:url(images/head_right.jpg);
width: 30px;
height: 100%;
border: none;
float: right;
margin-left:0 !important; /* Für moderne Browser */
margin-left:-3px; /* Für IE6 */
}

mfg Maik

 

[fanste]

Wie viele verschiedene Formen gibts denn noch? Ich kenne einen Bug, wo man für den IE den mittleren DIV anpassen muss (3px rechts/links abziehen bei margin).

Ich frag mich nun nur, wiso an das auf die umliegenden Container anwenden muss und nicht auf den mittleren. Da hats keine Wirkung gezeigt -.-


Aber Danke die vielmals. Ich hätte noch ettliche Stunden vergeblich gesucht^^