[css] Box-model in IE6, hack?

[Lorrens]

Goeiedag eem!

Ik ben bezig met een soort list, alleen nu wil het allemaal niet zo werken.
Mijn html :
<ul>
<li><img src="bla1.gif"></li>
<li><img src="bla2.gif"></li>
<li><img src="bla3.gif"></li>
<li><img src="bla4.gif"></li>
<li><img src="bla5.gif"></li>
</ul>
en mijn css:
ul {
list-style-type: none;
position: relative;
float: left;
}

ul li {
float: left;
display: inline;
width: 60px;
position: relative;
overflow: visible;
}

ul li img {
position: relative;
left: -20px;
width: 80px;
height: 80px;
}

De content van de li is dus groter dan de li zelf. Nu zouden de images dus steeds 20px over elkaar heen moeten vallen. In Firefox gebeurt dit natuurlijk netjes, maar in IE6 vergroot hij de li naar 80px.. waardoor de boel dus breder wordt en de images niet over elkaar heen vallen...
Iemand enig idee hoe ik IE6 zich kan laten gedragen zoals hij hoort..?
Liefst zonder javascript.. :)

[sander1]

Hoi!
Heb het even snel nagebouwd en de oplossing die lijkt te werken in IE6 (en ook blijft werken in IE7 en FF) is om in je CSS bij ul li img het attribuut left te vervangen door margin-left:

ul li img {
position: relative;
margin-left: -20px;
width: 80px;
height: 80px;
}

[Lorrens]

Had ik ook al geprobeerd... werkt bij mij niet... hij vergroot die box gewoon, en dat moet niet, hij moet gewoon 60px breed blijven. Jammer dat max-width niet werkt.

[sander1]

Gek, bij mij is dit de weergave in IE6:

http://surl.se/picture/20078/90892.jpg

Zitten er misschien nog andere elementen in je CSS die invloed hebben op de weergave van lijsten?

[Lorrens]

Niet op de weergave van lijsten.. heb echt geen idee waar het aan ligt.. maar ben erg benieuwd.. ga nog wel even verder testen :)
dankje voor je hulp :)