CSS fix? Post divs displaying on top of each other in Internet Explorer

  • Hi,
    I’m developing my new site using the Tanzaku theme, everything works perfectly in all browsers except Internet Explorer (7 & 8). In IE My post’s thumbnail blocks are floating on top of each other instead of sitting next to each other!

    The page link is here: https://www.mattcable.co.uk/portfolio

    I have an screengrab of how it is supposed to look: correct-view
    and an screengrab of how it looks in IE: IE-wrong-view

    I have tried everything I know of within the CSS to force the grid-item div to display as blocks & float next to each other. The CSS I have on this div is:

    div.grid-item {
	width:220px;
	float:left;
	margin: 0 20px 15px 0;
	padding: 0;
	display:block;
}

    This grid-item div sits within a grid-wrapper div which is:

    #grid-wrapper {
	margin: 30px 0 0;
	padding: 1000px 0 0 0; /* Prevent flicker in grid area. Check header.php. */
	width: 960px;
	}

    I’m sure there must be a simple fix? any ideas where i’m going wrong?

Viewing 1 replies (of 1 total)

  • Hi,
    Padding of 1000 on top… funny! Must be for that Ajax-y effect you have. But you’re overriding it, so that’s no biggie.

    Some thoughts at a glance…. your grid-wrapper DIV has no width, in a sense. You’ll look at the above, and say “yes it does, 960px”, but there’s an inline style borking that, giving it “width: auto;” Might be coming from a plugin, which hopefully has settings for that sort of thing. Because it’s inline it can’t easily be controlled from CSS.

    Also, the items in that DIV have width but no height. AND they are absolutely positioned, so in a way they’re sort of weightless, even with “display: block;”, so IE might just be squishing them all together. Maybe the easiest thing to try at first is to give div.grid-item some explicit height and see what happens.

    Those are where I’d start hacking away. Good luck.
    Dave

Viewing 1 replies (of 1 total)
  • The topic ‘CSS fix? Post divs displaying on top of each other in Internet Explorer’ is closed to new replies.