Bizarre rendering bug in IE7

[epp_b]

I'm experiencing a very strange behaviour in IE7 with a new site I'm creating. I'm not sure it's supposed to be published yet, so I've created a short video of the problem (attached: swf inside of a zip file)

This problem only occurs in IE7. IE6 and IE8 are immune (and, of course, all of the proper browsers are fine ).

These navigational links are nothing fancy: just divs, not absolutely positioned or anything. The rollovers are just onMouseOver="this.style.color=..." and the same for onMouseOut. That line you see is set as a background on the div when it's clicked.

Ever encountered something like this?

[epp_b]

OK, I've figured out what the problem is. It's the horizontal line that is set as a background... I'll post again when I've found a solution.

[epp_b]

Yup, definitely a bug with the background. IE6 still has a bug with this where it simply displays itself reloading the background image (the line disappears and reappears), but it's not as annoying and obtrusive as it is in IE7. I'm thinking that IE6 and IE7 reload all of the CSS directives whenever one is dynamically changed, which is what ultimately caused this weirdness.

I fixed this by creating the line using a border on a div and then repositioning the div when necessary.

[Paul O'B]

Hi, Glad you fixed it.

It looks like a "haslayout" issue and you should ensure each link is in haslayout mode (see faq on haslayout).

Why use JS to change the background as css can do that

[deathshadow60]

Paul is quite right on the .js doing CSS' job... though if you posted up markup and CSS -- or better a live example instead of a flash file we could probably tell you a LOT more about where things are going wrong for you.

[epp_b]

Why use JS to change the background as css can do that

Not in IE, it doesn't.

[Paul O'B]

Not in IE, it doesn't.

I assumed the links were rolling over which will work in IE6 with no problem

If you are doing something more complex then IE6 will need a helping hand of course but I wouldn't force 90% of users to get the extra code just because of ie6. Use unobtrusive scripting instead and just do it for ie6. Inline javascript should be avoided at all costs.

[deathshadow60]

Not in IE, it doesn't.

As Paul said, yes it does on anchors (which those links should be) all the way back to IE 5.0 - if you are trying to style something other than anchors you probably have the wrong markup and CSS.

Which is why we need to SEE your markup and CSS to tell you where things are going wrong and/or what you are doing wrong.

... and only IE6/earlier has issues with :hover on any element -- which a simple .htc file can compensate for quite easily.

Though really:

Proper markup for a menu like that:

<ul class="menu">
	<li><a href="#">menus</a></li>
	<li><a href="#">hours</a></li>
	<li><a href="#">staff</a></li>
	<li><a href="#">reservations</a></li>
	<li><a href="#">specials</a></li>
</ul>

CSS I would use to apply your effects and styling.

.menu {
	list-style:none;
}

.menu li {
	display:inline; /* just get this the *** out of the way */
}

.menu a {
	display:block;
	color:#888;
}

/* don't forget :active and :focus for keyboard users */
.menu a:active,
.menu a:focus,
.menu a:hover {
	color:#000;
}

Should work fine all the way back to IE 5.0