IE6 a:hover gap bug?

A "reverse" guillotine bug?

[luispunchy]

Hi folks. A quick pre-post, if you will, as I'm still trying to create a minimal test case, but I'm hoping just a brief description of this bug I'm experiencing might garner some replies. Here goes:

Bug in: IE6/Win
Code is: Valid XHTML and CSS

I have a few links that when hovered in IE6 cause a very noticeable (20 or so pixels) gap to suddenly appear in the parent container. Everything looks fine when the page loads (and when reloaded) - the gap only appears when you hover over one of these suspect links. And the gap stays after hovering... it is behaving almost like a reverse guillotine (referencing, of course, the well documented "IE/Win guillotine bug").

This is all occurring within a rather complicated layout, with nested floats, some abs positioning etc - hence why I've not yet worked out a suitable test case for myself much less to post here. Here is what I think is relevant:

• the parent container (containing the list of links) is floated, and cleared
  
• neither the list nor the list items (the LIs) are floated themselves - no dimensions declared either
  
• the links (anchor tags) are set to display:block and have dimensions declared
  
• there are a:hover style rules for those links that change certain properties (one of the main ingredients for the classic IE/Win guillotine bug)
  
• there are several additional elements (blocks and inline) within the same parent container, all occurring after the links in the doc flow (markup) - several of these are floated, including the element (a div) immediately after/adjacent to the list
  
• there are dimensions (fixed px widths, at least) assigned to all of the various floated boxes
  
• when the links are hovered, my tests so far show it is the parent container that is being expanded when this gap appears
  
• the gap actually occurs well below the links being hovered and after all the other elements - it appears at the bottom of the parent container
  

(I've got other examples of this same behavior happening under much less complex scenarios, and in one case a simple {display:inline;} applied to the offending link fixed it - no help here however)

Roughly I believe what is happening is that IE6 renders the parent container's dimension(s), and the hover activates a complete redraw that changes the layout of parent container - and causing this gap. Given the complexity, I'm actually assuming there is more than one bug occurring simultaneously... but I am almost certain hasLayout is the underlying issue -- I just can't find which elements to apply which fixes too!

OK - I know, we need a test case! I am working on it ;) - but if just the general description here sounds familiar and anything comes to mind, please do post or sticky a reply.

... and I'll get that test case posted here ASAP. Thx.

[SuzyUK]

sounds like hasLayout indeed.

I'd try setting it on the li's first, it sounds like the li would need to "become responsible" for the layout of the links so it can cope with the hover.

sometimes it's the grandparent that needs it set so maybe try it on the <ul> too