Home Unanswered Active Tags New Question

Context menu hover css not working in IE8 quirks mode

Hi

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?

Asked by Rhys 7 months ago.
Replies

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 Dan Letecky [DayPilot] 7 months 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: -

<meta http-equiv="X-UA-Compatible" content="IE=6.5">

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

Comment posted by Rhys 7 months 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.

Answer posted by Dan Letecky [DayPilot] 7 months 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 7 months 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?

Comment posted by Rhys 7 months ago.
New Reply
This reply is
Your name (optional):

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java