I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.