Why is moving an element out of and back into the viewport affecting it?

Question

Hey,

So I've got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I have never seen an issue like this before. Has anyone else and can anyone suggest a solution. Below are examples of the working and broken image and the url to the live code.

- Seen on load

- Broken after scrolling out and into viewport

I'm using a sliding doors approach with a span inside an a and css background images

The full menu can be found @ http://bjmarine.net/samples.htm

Cheers, Denis

Solutions:

#navigation ul.primary-nav li.selected a.menu-item-hover{height:25px;}
#navigation ul.primary-nav li.top-level.selected a.menu-item-hover span{height:21px;}
* html #navigation ul.primary-nav li.residential.selected a.menu-item-hover{width:88px;white-space:nowrap;}

Answer 1

This sounds like the IE peekaboo bug to me - no specific advice, but a quick google should offer some ideas.

Answer 2

Hi.

First of all, when checking for bugs like this (better yet, always!) validate your markup and CSS to be sure you're working on standard code. If not, you will have problems.

A quick check on your markup throws 23 errors! http://validator.w3.org/check?uri=http%3A%2F%2Fbjmarine.net%2Fsamples.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Granted, most of them are from the HEAD section, but there are a couple in the body - solve those, then try again.

Next: even with buggy markup, common sense tells you scrolling down and up shouldn't affect the rendering. That is a IE bug, for sure, so no question you'll have to change your code to solve it.

So:

• You have invalid markup - don't expect quirks mode to interpret what you meant. Solve those before trying anything else (for example, UL can't be empty)

• Older versions of IE don't like the '>' CSS selector. Get rid of it and use classes instead.

• If you want to display something inline and with a specific height and width, use the display: inline-block rule, that's the correct option instead of just display: block.

• You have negative margins. That's not recommended at all. You usually have much better ways to solve it.

As you can see, many things may be triggering that bug. Solve all of them (which you should do even if no bugs were present) and try again.

If you're still getting it, consider refactoring your markup - we can find workarounds many times, but sometimes we have to adapt (we just can't fix IE bugs remotely...)

Answer 3

I think it has to do with a hasLayout issue.

I was able fix the behavior in IE 7 (I dont have IE 6 on my computer) by introducing a height property to the style, to force IE to acknowledge it had a layout.

#navigation ul.primary-nav > li.top-level > a.menu-item-hover:hover span, 
#navigation ul.primary-nav > li.top-level:hover > a span,
#navigation ul.primary-nav > li.top-level.selected > a span{
    color:#fff;
    display:block;
    margin:-17px 0 0;
    padding:12px 7px 10px 15px;
    height: 21px;     /* this is what I added, in global.css */
}

Unfortunately, there is still a problem in terms of vertical position once you set the height on the element. You can play around with the top property, or subtract more from the margin-top property though to fix this.