✔ IE6: Abstand unter Bild

[schutzgeist]

Hallo,

ich habe in einer Liste Liste Bilder eingefügt und diesen am unteren Rand einen Rahmen gegeben. FF stellt alles schön dar - im IE6 bekomm ich allerdings einen Abstand zwischen die Bilder und die Linie, den ich einfach nicht weg bekomme..

CSS

#navi {
position: relative;
float: left;
width: 201px;
}
#navi ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navi li {
height: 25px;
border-bottom: 1px solid #fff;
}

HMTL

div id="navi">
<ul>
<li><img src="image/navi/start.jpg" alt="Start" width="201" height="25" /></li>
<li><img src="image/navi/unternehmen_a.jpg" alt="Unternehmen" width="201" height="25" /></li>
<li><img src="image/navi/leistungen_a.jpg" alt="Leistungen" width="201" height="25" /></li>
<li><img src="image/navi/referenzen_a.jpg" alt="Referenzen" width="201" height="25" /></li>
<li><img src="image/navi/kontakt_a.jpg" alt="Kontakt" width="201" height="25" /></li>
<li><img src="image/navi/links_a.jpg" alt="Links" width="201" height="25" /></li>
<li>Gästebuch</li>
<li><img src="image/navi/impressum_a.jpg" alt="Impressum" width="201" height="25" /></li>
</ul>
<p>&nbsp;</p>
</div>

 

[Maik]

Hi,

versuch es mal mit diesen Regelerweiterungen:

* html #navi li {
float: left;
}

#navi li img {
display: block;
}

 

[schutzgeist]

Oh man, wieder mal was, wo ich nie im Leben drauf gekommen wär.

Besten Dank

 

[gocsp333]

hallo,

vielen dank auch.

Aber ie7 hat trotzdem noch das Problem.

mfg

 

[Maik]

Hi,

Aber ie7 hat trotzdem noch das Problem.

der IE7 unterstützt den verwendeten Star-HTML-Hack (* html #navi li) nur im Ausnahmefall, wenn das HTML-Dokument im Quirksmodus übergeben wird, setz daher besser einen "Conditional Comment" ein.

Basierend auf dem o.g. Stylesheet lautet der Code dann folgendermaßen:

<style type="text/css">
<!--
#navi {
position: relative;
float: left;
width: 201px;
}
#navi ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navi li {
height: 25px;
border-bottom: 1px solid #fff;
}
#navi li img {
display: block;
}
-->
</style>
<!--[if lte IE 7]>
<style type="text/css">
#navi li { float: left; }
</style>
<![endif]-->

 

[gocsp333]

perfekt danke! Jetzt läuft es. Ätzend mit dem IE!