Question

I’m having a problem with a site created in Drupal 6 but not compatable in IE. Anyone familiar with Drupal would you mind just quickly taking a look at the website and let me know if anything jumps out at you?

http://freespiriteurodesign.com.b1.bloomsite.net/

It’s probably a css: “hover” , “float” or “display” issue but what is really confusing me is that it looks like the images were repeated once next to each other – Let me explain, (there are six images total with three overlaying the first three to create the hover effect) In IE it looks like there are 12 total (that the image and it’s overlay are repeated) and that this is why it is pushing the floated images underneath eachother. It shows up correctly in firefox, if it helps to look at what is is suppose to look like there. I’ve been up all night looking for a similar problem on any forums but haven’t come across any.

I just thought that perhaps someone very familiar with Drupal might think it looks like something they’ve dealt with before and give me a starting point…

ps. (oh yeah, and I want to figure out what the actual issue is, not just use a tag that puts the site in compatability mode) – Thank you for all thoughts!

Answer 1

Ok, after looking at your source I see that you are nesting divs inside your anchor tags and I would say that is your problem as it is not valid HTML:

<a href="/design">
    <div class="desgn_bx">...</div>
</a>

Instead, nest the div elements the other way around so your HTML is as follows:

<div class="desgn_bx">
    <a href="/design"></a>
    <!-- rest of your content -->
</div>

Then add the following CSS:

.desgn_bx {
    position: relative;
}

.desgn_bx a {
    *background-color: inherit;   /* add these for IE7 as it does */
    *filter: alpha(opacity=10);   /* not like boxes with no content */
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

This will force the anchor tag to take the full height and width of the .desgn_bx element so it will still be clickable.