ie9 div layout issue

Hi, I’m having a problem with my site on some older Internet Explorer browsers, specifically IE9 on Windows. The layout gets really screwed up on IE6, but I don’t think I’m going to worry about that one.

I have a grid of thumbnail boxes, 3 rows of 5 for 15 total boxes. On IE9, the fourth box in the second row of the grid ends up blank, causing the thumbnails to get pushed into an additonal row, which messes up the layout of the lower part of the page.

I suspect there may be something I can add to the declaration block of my DIV that will fix this issue on older IE browsers.

Much thanks in advance for any help.

DS

It is known that the inline-block property is’t working in older IE versions. There are some hacks to make it work though.

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

What you can do as well is make the img-wrap divs float. I made a list of the thumbnail part and made the <li’s> float and it is working for me in IE9. Furthermore did I remove the extra border class and attached the border property to the image inside img-wrap.

Have a look here

It’s invalid to have <a> tags around block elements like a <div> in anything other than HTML5, but that aside, you’ve messed up your HTML here, placing the img-wrap div around the shadowbox <a> instead of the other way around, as is the case for the other items.

I understand now that it is invalid to wrap an <a> tag around a <div>. However, I need the entire box to be clickable, and I have a hidden <div> that fades in on mouseover for each box.

So wrapping the <a> around the <img> inside the visible <div> means that the box is no longer clickable when the hidden <div> fades in. Wrapping the <a> around the content in the hidden <div> means that only that content is clickable (not the whole box), and since that content contains an <h1> and an <h2> tag, i get more invalid markup anyway.

Is there a solution to this problem that will validate? I’ve fixed some other issues with the HTML and CSS so this “<a> around the <div>” issue is the only thing keeping my site from validating!

Thanks in advance for your help.

DS

Hehe, just switch to a modern doctype:

<!DOCTYPE html>

HTML5 allows <a>s to wrap around block elements.

I need the entire box to be clickable, and I have a hidden <div> that fades in on mouseover for each box.

You didn’t need to use divs to achieve that, but it doesn’t really matter, anyhow. :slight_smile:

A note from @Paul_O_B about “a” tags around blocks: “Set the anchors that wrap your block elements to be display:block (although IE will sometimes still get confused in more complicated circumstances).”