Problems with display:inline-block in IE7

[cinematic_jesi]

Hey I have a div that stripped of content... looks like this:

<div style="display: inline-block; text-align: center; width: 128px; padding: 3px; border: 1px solid #999999; vertical-align: middle; margin: 6px;"></div>

Then through php this div is dynamically repeated. Now it looks beautiful in FireFox, but in IE7 (atleast, I haven't gone home yet to check IE6) it just displays the div's vertically, like a list. If I do the float: left; well that messes everything up, because not everything is the same size that goes in the div and they don't stack properly.

Ideas?

[FourCourtJester]

They stack up vertically even with a width attached to them?

[cinematic_jesi]

Yep, Yep! It hates me :(

Here's the page if you can view it in both browsers: http://secondandseven.com/media/gallery-photos.php?pageNum_Photos=2&totalRows_Photos=38&Collection=22&Album=9#Gallery

[lochgo]

Check this (http://www.quirksmode.org/css/display.html) chart of the compatibility of the display tag. Basically, IE does not support inline-block. There is a workaround listed here (http://www.brunildo.org/test/InlineBlockLayout.html)

[cinematic_jesi]

I feel stupid for asking this, but I don't understand what the work-a-round is?

[lochgo]

No worries.

Add this after the css stylesheet call in your HTML.

<!--[if IE]><style>
.layoutc span, .layoutc div {
zoom: 1;
}
</style><![endif]-->
<!--[if lt IE 5.5000]><style>
.layoutc span, .layoutc div {
height: 0;
vertical-align: bottom;
}
</style><![endif]-->

[lochgo]

Change the class names as needed of course.