IE CSS incorrect after applying Safari fixes

[dennishall]

Hi:

I have a dropline nav menu that works great in all standards compliant browsers and DID work perfectly in IE8 until I applied some Safari CSS hacks.

The dropline menu has only 2 sub-menus under Company and Expertise.

The issue is: prior to applying the Safari hacks, when hovering over Company and Expertise, the sub menu horizontal alignment was perfect. Since the hacks, when hovering over Company and Expertise, the submenu positioning is more right and staying relative to the top menu item being hovered.

I'm spinning my wheels trying to resolve this now for IE8 and ask that someone more knowledgable take a look at what it could be.

The best thing is to direct you to the URL to see for yourself rather than post hundreds of lines of code from 10 different files.

My DEV url is: http://development.products-and-services.ca

Using IE8 and hovering over Company and Expertise will show you the menu horizontal positioning issue.

If someone could assist, it would be awsome.

Best Regards,
dennishall

As you're using conditional css for IE, supply !important statements to neutralize changes for safari.

This is the computed css for the blue nav dropdown (non-IE):

b

ackground-image: url(http://development.products-and-services.ca/cms/fckeditor/uploadfiles/common/BlueSubMenu.png);
display: block;
float: left;
height: 34px;
left: 84px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
top: 47px;
width: 894px;
z-index: 400;

Seems the "relative left" (offset) is causing the problem. If so, in your IE-only files:

something like:

left: 0 !important;

Although if your 'redeclare' the css statements (IE file) after the common files, they may not need the !important.

Up to you, have a fiddle.

[dennishall]

thanks for the input ardav:

The computed css above is for the fixed_blue_menu style.
The fixed_blue_menu style is a stationary menu detached from the nav menu (basically just a seperate horizontal menu at the top of the page).

The issue I cannot overcome is related to hovering your mouse over the main menu items "Company and Expertise", if you click on them, the fixed_blue_menu will display correctly, but the hover version of that same menu is offset.

I've been able to trace the area of concern in Firebug, but cannot seem to fix it independantly of the rest of the section of css.

I have pasted the section of css causing the issue. This css is extracted from my site_menu.css file.

.nav .select :hover .select_sub, .nav .current .show {
display: block; 
position: absolute;
float: left;
width: 894px; 
top: 52px; 
background-image: url('../fckeditor/uploadfiles/common/BlueSubMenu.png');
background-repeat: repeat-x;
padding: 0; 
z-index: 500;
left: -371px !important;
}

Thanks for the help on this as my head is about to explode :)

Tell you what - get rid of those onmouseover events on the buttons beneath the stage area - forcing a page reload on mouse over is seriously uncool - almost gave me a nosebleed!

Anyway I don't know what your css problem is, but I've seen similar issues when a container above the problem area is bigger than expected (e.g. height differences in IE and other browsers - usually due to padding/margin).

[dennishall]

Thanks for teh feedback ardav:
I managed to correct this myself. The issue was in 2 places...
1st. I have now formally moved away from MS WebExpression for my HTML editing because this product showed me that I had deleted lines of code in my METADATA that infact were not deleted and caused doubely defined CSS. DreamWeaver displayed the whole history of deleted code still existing in my source (!@#$%^&* MicroSoft for this one).
2nd. I found and modified an awsome piece of PHP code that detects the browser and loads the specific stylesheet(s) for it.

So finally, I was able to create delta stylesheets for each browser.

Best Regards,
dennishall