Context menu hover css not working in IE8 quirks mode

Asked by Rhys
14 years ago.

I am having trouble getting the rollover affect to run on the Context Menu.

When I open the developer tools in IE8 it says our application is running in quirks mode and the rollover effect does not work. However if I change the settings to IE8 standard the rollover works. Unfortunately we can not run our application in this mode as it causes issues with other areas of the site.

What changes do I need to make to the CSS to get the rollover effect to work on the context menu when the site is running in IE8 quirks mode?

how-to asp.net

Comment posted by Dan Letecky [DayPilot]
14 years ago.

Do you mean the real quirks mode (i.e. no doctype is specified) or the IE7 compatibility mode (the "broken page" icon in the address bar)?

Comment posted by Rhys
14 years ago.

our doc type is: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

however due to our current configuration we have added the following meta tag: -

if we turn this off the application is rendered incorrectly but the rollover affect works.

Answer posted by Dan Letecky [DayPilot]
14 years ago.

Thanks for the update.

The hover effect is defined using the following classes (see Demo/Themes/themes.css):

.menu_main a span 
{
	display: block;
	height: 20px;
	line-height: 20px;
	width: 150px; 
	overflow:hidden;
	padding-left: 2px;
	padding-right: 20px;
}

.menu_main a:hover {
	background-image: url('menu_default/left.png');
	background-repeat: no-repeat;	
}

.menu_main a:hover span {
	background-image: url('menu_default/right.png');
	background-repeat: no-repeat;	
	background-position: 100%;
}

It looks like the IE6 mode isn't able to display it correctly. I tried a few quick tweaks but without much success. The demo layout is all broken in the IE6 mode so it's difficult to test it.

You may want to replace it with something more simple, like just adding text-decoration:underline on hover.

Comment posted by Rhys
14 years ago.

The problem is that IE6 only recognises the hover element when attached to the <a> tag.

I have been trying to implement some fixes but so far haven't had much luck.

Comment posted by Rhys
14 years ago.

I tried adding the text-decoration:underline element but that doesnt work either.

Is there an update on this, how long will it take to fix the hover over effect for IE6?

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.