WordPress.org

1. soluble
   Member
   Posted 1 year ago #

   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: http://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?

2. flamenco
   Member
   Posted 1 year ago #

   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

Topic Closed

This topic has been closed to new replies.