Overlapping elements stop overlapping in IE7 on class change

Question

On this page http://zenchan.com/program/

When I rollover the right box 2nd from the top, suddenly the overlapping (negative margin disappears). What's happening is that a 'hover' class is being added to shift the background sprite.

The two yellow boxes are debugging: if the hover class is put their in advance there is no problem. So fundamentally the CSS is not a problem for IE7 but adding the class is.

Any ideas what's causing this. I've tried adding haslayout to various elements but to little effect.

Edit: I found a solution to this. Apply hasLayout to a surrounding element using min-height: 10px.

Answer 1

Hey Gazzer,

Looking at the markup, I think you should try and add a div to surround each row of divs. You are floating the elements to the left, and you do not have any element below with the clear: both; value set. Example:

<div id="row1" class="rowWrapper">
    <div id="program-dayoutdoor" class="program-wrapper">
        CONTENT
    </div>
    <div id="program-daycamp" class="program-wrapper">
        CONTENT
    </div>
</div>

Then in your CSS you will need a style like the following

.rowWrapper {
    clear: both;
    height: WHATEVER_HEIGHT_YOU_NEED_PER_A_ROW
}

Im not positive this will fix your problem, but it is a start. What this will do is ensure that whenever things are changing that the rows do not try and push themselves on top of each other.

Also, make sure that the sizes on both classes are the same, that obviously would have an effect.

Hope this helps,

Metropolis

EDIT

Ok I think I see your problem. Starting out your CSS has this for those elements

body.page-slug-program div#program-daycamp {
    background-position:0 -141px;
    margin-left:-32px;
}

But, onhover the margin-left is going away and the background-position = -390px -341px; This means that your CSS has got to be getting altered somewhere in between.