Forum Moderators: not2easy
Because I haven't seen mention of this issue before is it something new with FF 1.5? Or an issue that has been around, but just haven't found a thread for it? Other than recoding to remove the 'position: absolute' from the layers for the menu and navigatin is there a fix? I'd really appreciate understanding what is jamming up the works with absolute position in FF. BTW the menu and navigaion layers do NOT overlap.
Removing 'position: absolute' fixes the link problem in FF and obviously blows apart the design at the same time.
#menu { height: 17px; width: 720px; left: 0; top: 210px; position: absolute; }
#menu ul { font-size: 12px; text-align: center; margin-right: auto; margin-left: auto; }
#menu li { background-color: #007742; text-decoration: none; margin: 0 5px 0 0; padding: 0 0.5em; border-right: thin solid #dad2ce; border-bottom: thin solid #dad2ce; border-top-color: white; border-left-color: white; list-style-type: none; display: inline; }
#menu a:link { color: #d6ff1c; font-size: 12px; line-height: 1em; text-decoration: none; }
#menu a:visited { color: #d6ff1c; font-size: 12px; line-height: 1em; text-decoration: none; }
#menu a:hover { color: #1cf0ff; font-size: 12px; text-decoration: none; }
menu and navigaion layers do NOT overlap
I have a theory that they might do, not visually perhaps but once the AP element has a place in the stacking context then that whole level, layer if you like is being used up.. unless there's something else on the page which is positioned absolutely? .. however I can't really explain or even know if it's a bug or not, but I have seen this or something like it when working with AP and links before.
without knowing the full source order how the nav and menu are interacting, or what if any other elements are involved..
Workaround..
.. the theory is to get the links to always appear on top of the stack regardless of the stacking level of their positioned ancestor. To do this you need to apply a high z-index to something nested in the AP menu/nav divs, so this is either the <a>, <li> or the <ul>. In order to apply a z-index to a non-AP element you need to make it
position: relative;so try
#menu ul {
position: relative;
z-index: 500;
}
and see if that helps, I'm not altogether convinced it will help both menus, but let us know
As a test the 'position: absolute' was removed from the menu layer's code. Of course it radically changed the position for the menu layer, but the links did work. Same results when 'position: absolute' was removed from the navigation layer.
I have redone the code so the layout is the same, but absolute positioning is not used for the menu or navigation layers. Still, I'd like to find out what is happening with FireFox. If the links only worked in IE, I'd blame it on IE. But with the links also working in Opera the mystery deepens.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
