Member Avatar for 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:

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

  • 2 Contributors
  • 4 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dennishall

Dani AI

Generated

This looks like a classic positioning-context issue made worse by tool/UA quirks. The symptom you described — submenus shifting horizontally only in IE after adding Safari-specific rules — most often means the submenu's containing block changed (a different positioned ancestor, a duplicated rule, or a cascade/order problem). already tracked down duplicated CSS introduced by the editor and solved the immediate problem; that diagnosis is exactly the right first step.

Practical, ordered checklist to reproduce and fix the problem:

  • Reproduce the bug with a minimal test case (strip everything except the nav markup/CSS). That isolates whether the Safari hacks are the root cause.
  • Use IE's Developer Tools to inspect the submenu's computed position and its nearest positioned ancestor. If the ancestor differs between browsers, make the intended ancestor explicitly positioned (for example, give the top-level LI position: relative) so the submenu's absolute coordinates are stable.
  • Look for duplicate or out-of-order stylesheet loads (WYSIWYG editors can leave hidden metadata). Confirm the rules actually delivered to the browser by viewing the served source and the computed styles panel.
  • Temporarily disable any JavaScript handlers or inline event attributes that change layout or force reloads while hovering (as @ardav warned) to rule out scripting interference.

If browser-targeted overrides are needed, prefer small override files loaded only for the affected IE versions instead of server-side UA sniffing. A simple conditional-comment approach keeps the base CSS clean:

<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie-overrides.css" />
<![endif]>

Longer-term: use a consistent pattern for dropdowns (parent positioned, submenu absolute, avoid floating the submenu itself), version-control your source to avoid mysterious editor changes, and validate the final HTML/CSS in each browser while disabling non-essential hacks.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

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();
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.

Member Avatar for 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 :)

Member Avatar for Member #120589

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).

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.