Strange rendering issue occurring in IE8 only

Question

I'm having some strange rendering issues that are occurring only on IE8, not IE7, 6, or any of the other browsers I've tested (ff, chrome, opera mostly).

http://www.sealymattressonline.co.uk/Shop/Sealy-Silver-Collection-C246/

in IE8 scroll down to the bottom of that page (or indeed any of the other category links from the left sidebar) and on the first pageload there is an un-explained whitespace gap on random products (see http://plixi.com/p/92068948)

All I need to do is highlight/select the dodgy render with the cursor, or refresh the page, and it renders correctly from then on. (see plixi.com/p/92069037 for how it looks once it's been "fixed" by highlighting / refreshing the page)

I know that it's not my PC - I've tried several different PCs at my workplace and all do the same on IE8 - so not a browser plugin like some similar problems. I'm also unable to test IE9, as I'm on XP.

Any ideas at all? The winning helper will get cookies (imaginary cookies are yum!)

UPDATE:

I can't reproduce this on my machine's local server or another test server. It doesn't make any sense that this might be a server related error??!

Answer 1

This style seems to be the culprit:

.group {display:inline-block;} 

I don't see why you need that. It spans the width of its container, so normal old block should do. You could probably leave off the declaration altogether, as "block" is default for divs.

In IE8 developer tools, I changed display to "block" and the white-space disappeared without any side effects.