Question

I encountered a strange problem in IE 8/7 and I have gone through hell (and back) to reach a minimal test-case that demonstrates the issue…

Consider the following bit of HTML:

<form id="hover-test">
  <fieldset>
    <div id="hover">
       <p>always visible</p>
       <p class="hidden">Visble only on hover</p>
    </div>  
  </fieldset>

  <fieldset>
    <a href="#" id="link">Please jump</a>
  </fieldset>
</form>

And this bit of CSS:

form                 { background-color:#f5f5f5; }
.hidden              { display:none; }
#hover:hover .hidden { display:block; }
#link                { position:relative; }

What it should do: On hover an additional paragraph becomes visible, pushing the next fieldset and all its contents down. (works fine in FF/Chrome/Safari/Opera)

What it does in IE 7/8: The paragraph becomes visible, pushing down the following fieldset. The link however stays fixed in place for reasons I can’t fathom.

In the frustrating chase for a minimal mark-up that reproduces the problem (the effect vanished when I removed single lines of CSS from the original code, but my testcase could have them and still be fine… O_o) I identified at least three players working together here:

1. the fieldset: If I put everything in divs or in a form without fieldsets, all is well
2. the position:relative: Uncomment that line and voilá – link jumps.
3. the background color: This makes no sense whatsoever to me, but without this it works.

So, here’s the question (apart from the implied “WTF?”):

Has anybody any clue on what is causing this behavior? And how to solve it? Or at least a hint into which of the many known IE issues I could look into to further test stuff?

Maybe I could come up with a way to bend the structure and…say… have the background-color on some additional wrapper div or something, but this seems… somewhat silly, and anyway, I feel as if not understanding this now will make things possibly very complicated down the road.

Answer 1

It was your comment about the position: relative that helped me solve it. That flagged me to think hasLayout! The issue seems resolved if you make sure both form and fieldset have layout set also (just giving it to the #link created the issue). One (among many) ways:

form, fieldset {zoom: 1}

See the working fiddle.

BTW: You should not have two #hover id’s in your code. That should be set to a class (maybe it is just an error in your example, but I wanted to note it).