CSS: help neded for IE7

Question

For some reason http://funnyfurniture.net/ and http://funnyfurniture.net/p/5/teak-root-garden-chair/ are so badly broken in IE7. Can somebody suggest a fix?

Answer 1

It's because you're using display: inline-block on .content li.shadow-pod.

IE7 only supports display: inline-block on elements that are naturally inline (such as <span>), unless you hack it into shape. Use this:

.content li.shadow-pod {
    /* your other rules */

    display: inline-block;
    *display: inline;
    zoom: 1
}

That's using the Star Property Hack to tell only <IE7 to apply the display: inline rule.

It is invalid CSS, but it does no harm. It's fine to break validation provided that you understand what you're doing. That said, you could always use a valid hack or a conditional comment instead:

<!--[if lt IE 8]>
<style>
.content li.shadow-pod {
    display: inline;
    zoom: 1
}
</style>
<![endif]-->

Also, see this previous answer I wrote: How to give Internet Explorer different CSS lines?

Answer 2

you're using

.content li.shadow-pod {
    display: inline-block;
}

inline-block isn't fully supported in ie7

try float:left instead