FF vs IE CSS menu - horizontal layout

[hlj71]

Hi! I am having some issues getting the horizontal layout of the CSS dropdown menu to work in Firefox. It seems to push the last image to the next row. I've tried using the !important note in the CSS file to get Firefox to read the style, but not IE, but that's not working. IE still sees it. The menu lays out correctly in IE. If I can get some help on why Firefox is displaying the top, right menu differently than IE, I would really appreciate it!!! I have been trying to get this fixed for days now.

Here is a link to the site I am working on: http://www.aahanet.org/aahalongbeach2010/

Here is the CSS code for the top, right navigation:
#menu1 {
display:block;
z-index: 10;
}
#nav1{
margin: 0px;
}
#menu1>#nav{
margin:0px -40px;/* hack for gecko browsers -- makes menu sit flush*/
}
#nav1 ul {
z-index:10;
list-style: none;
padding: 0px 0px;
margin: 0;
}
#nav1 li#aahahome {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
padding-top:9px;
float: left;
height:21px;
width:112px;
text-align: Center;
background-image:url(../graphics/menu1_left_bkgd.gif);
background-position:bottom;
color:#000;
z-index:10;
}
#nav1 li#tabs {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
padding-top:9px;
float: left;
height:21px;
width: 112px;
text-align: Center;
background-image:url(../graphics/menu1_bkgd.gif);
background-position:bottom;
color:#000;
z-index:10;
}
#nav1 li#media {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
padding-top:9px;
float: left;
height:21px;
width: 111px;
text-align: Center;
background-image:url(../graphics/menu1_bkgd.gif);
background-position:bottom;
color:#000;
z-index:10;
border-right:1px solid #54301a;
}
#nav1 a {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
color: #000;
text-decoration: none;
}
#nav1 a:hover {
color: #fff884;
text-decoration: none;
}
#nav1 li li a { /* color behind dd non hover state */
display: block;
}
#nav1 li li a:hover { /* color behind dd hover state */
color:#eddcb5;
border:none;
}
#nav1 .fixalign {
padding-top: 3px;
text-align:center;
vertical-align:bottom;
}
#nav1 .fixalign2 {
padding-top: 3px;
}
#nav1 li ul { /* subnavigation */
display: none;
position: relative;
top: 100%;
left: 0;
margin-top:9px;
font-weight: normal;
background: url(../graphics/ddbkgd1.gif) bottom left no-repeat;
}
#nav1 li>ul {
top: auto;
left: auto;
}
#nav1 li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
#nav1 li:hover ul, #nav li.over ul { /* CSS that triggers the drop down effect IE and Gecko style browsers */
display: block;
}
#nav1 li:hover a, #nav li.over a{ /*Controls the color of the links in the dd */
color: #000;
}


Thank you!!

[WebJoel]

First thing I noticed (may not be the complaint..) is this:

....
#menu1 {
display:block;
z-index: 10;
....
}
A "z-index" will only work on a "position:relative;" or a "position:absolute;"

The default is "position:static:" which will not hold a "z-index" other than the default layer of "1" ("layer" is an improper term for CSS but describes it well enough.)

Un-stated is always "position:static;", which is what you have now. :) Several instances of this.

The fact stated that IE shows correctly (well, you said "differently" and not sure which browser shows you your intention) and Firefox does not, may in fact be that IE is incorrectly showing what you intended, and Firefox is correctly showing you what you wrote... It's a bit of a dichotomy here, but it is usually best to trust Firefox first, even when it 'appears' to be showing you what you do not want to see...

[hlj71]

So, I finally figured out the start to a solution. I put the <script> tags that housed the JS menu into a <div> tag (they were in table tags) with no width or anything. Then, in the CSS, I added the float:right; style to the ID (#menu1) that controlled that JS menu and it worked. :)

I moved the 2nd level menu (the one that starts with "Registration") into a <div> tag and it also now lays out horizontally as it should. However, this menu needs to sit flush with the left border of the page. When I add the float:left; style to the ID (#menu2) that contols this JS menu, it doesn't move the menu all the way left. There seems to be a 40-50 pixel space between the left border and the menu.

Here's where the files can be found:
The page can be viewed at: http://www.aahanet.org/aahalongbeach2010/
The CSS is at http://www.aahanet.org/aahalongbeach2010/s...YC2010style.css
The JavaScript menu is at http://www.aahanet.org/aahalongbeach2010/include/menunav2.js

IE is displaying the menu as it should look, but FF does not.

Any ideas anyone?? :confused: