1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS navigation menu appears great in IE, but not in Mozilla

CSS navigation menu in Mozilla shows subitems next to the original li.

         

justachild20

7:43 pm on Feb 3, 2010 (gmt 0)

10+ Year Member



I'm having issues with some CSS code that I'm doing on my first website. When I look at it in IE, it looks awesome and everything is in order. When I view it in Mozilla, instead of having a drop down menu, the subitems appear next to the item. Below is my code. Any suggestions? Anyone?

#nav{position:absolute;top:150px;left:0;list-style:none;z-index:99;background:#393C9C;
}
#nav li{float:left;padding:7px 30px;position:relative;}
#nav ul li a{font-size:9pt;}
#nav a{color:#FFF;font-weight:bold;font-size:10pt;text-decoration:none;white-space:nowrap;}
#nav a:hover{text-decoration:none;}
#nav li ul{display:none;list-style:none;position:absolute;top:28px;left:0;background:#FFF;border-bottom:2px solid #FFF;}
#nav li:hover ul{display:block;}
#nav li ul li{float:none;position:static;border:1px solid #FFF;border-bottom:0;background:#669966;font-size:9pt;padding:0;height:31px;width:215px;}

#nav li ul li a{padding:6px 13px;display:block;height:19px;width:auto;}
#nav li ul li:hover{background:#7286CD;}
#nav li:hover{background:#669966;}

alt131

10:40 pm on Feb 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi justachild, and welcome to WebmasterWorld ;)

I wasn't able to reproduce the issue as described. Using a standard nested unordered list, all the browser versions I checked produced a horizontal single-line menu with the sub-items displayed in a vertical drop-down on hover. Sort of like this:
Item1---Item2---Item3---Item4
---------subItem2a
---------subItem2b
---------subItem2c
(The dashes are just space holders to stop the forum code displaying the sub-items on the left margin, rather than under Item2 as I was seeing in the browser)

There were visual differences, and the code could be refined, but the sub-items were definitely displaying in a drop-down rather than "next to", or inline with the menu item itself.
Can you post your html, plus any other styles that could be affecting the ul/li or links?

[edit] Trying to clarify description[/edit]

justachild20

11:08 pm on Feb 4, 2010 (gmt 0)

10+ Year Member



Thank you, thank you for your response... Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><snipped specifics></title>

<link rel="stylesheet" type="text/css" href="file://///2003-ts/example.css" />
<p align="left"><img src="images/example.jpg" width="950" height="134" />
</head>

<body>
<p>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<ul><li><a href="#">example</a></li>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li></ul>
<li><a href="#">example</a></li><ul>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>


<div id="banner"><img src="images/slideshow/bannerexample.jpg" width="634" height="180" /></div>


<div id="content">
<h2>example title</h2>
<p><snipped specifics></p>
<h1>example heading</h1>
<p><snipped specifics></p>
</div>


<div id="sponsors">
<h5>example</h5>
<h3><a href="#">example</a><br/>
02/22/2010 - 02/26/2010</h3>
<h3><a href="#">example</a><br/>04/16/2010 - 04/18/2010</h3>
<h3><a href="#">example</a><br/>05/24/2010 - 05/28/2010</h3>
<h3><a href="#">example</a><br/>06/14/2010 - 06/20/2010</h3>
<h3><a href="#">example</a><br/>09/20/2010 - 10/05/2010</h3>
</div>

<div id="links"><h2><a href="#">\Example Text</a></h2>
<p><a href="#">Become a fan of us on Facebook!</a> </p>
<h5>Join Our Mailing List</h5>

<form action="mailto:me@example.com?subject=Hello there." method="post" name="form1" target="_blank" id="form1">
<input name="E-mail address" type="text" value="e-mail address" />
<input type="submit" name="Submit" value="Submit" />
</form>
<p>
</p>
</div>


<div id="contact"><p><a href="mailto:info@example.com">info@example.com</a></p></div>

</body>
</html>



AND HERE IS MY FULL CSS:


/* CSS Document */

#nav{position:absolute;top:150px;left:0;list-style:none;z-index:99;background:#393C9C;
}
#nav li{float:left;padding:9px 30px;position:relative;}
#nav ul li a{font-size:9pt;}
#nav a{color:#FFF;font-weight:bold;font-size:10pt;text-decoration:none;white-space:nowrap;}
#nav a:hover{text-decoration:none;}
#nav li ul{display:none;list-style:none;position:absolute;top:28px;left:0;background:#FFF;border-bottom:2px solid #FFF;}
#nav li:hover ul{display:block;}
#nav li ul li{float:none;position:static;border:1px solid #FFF;border-bottom:0;background:#669966;font-size:9pt;padding:0;height:31px;width:215px;}
#nav li ul li a{padding:6px 13px;display:block;height:19px;width:auto;}
#nav li ul li:hover{background:#7286CD;}
#nav li:hover{background:#669966;}

#links {
width: 270px;
position: absolute;
left: 0px;
top: 12px;
margin-top: 370px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #0066CC;
margin-left: 38px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0066CC;
background-color: #EFEFEF;}

#links p{ font-family: Arial; font-size: 10px; color: #000000;}

#sponsors {
width: 275px;
position: absolute;
top: 12px;
right: 0px;
margin-top: 175px;
margin-right: 44px;
background-color:#FFFFCC;
}

#banner{
width: 634px;
position: absolute;
top: 12px;
left: 0px;
margin-top: 175px;
margin-left: 40px;
}

#pagetemp1{
width: 420px;
position: absolute;
top: 12px;
left: 0px;
margin-top: 200px;
margin-left: 250px;
}

#pictemp1{
width: 250px;
position: absolute;
top: 12px;
left: 0px;
margin-top: 200px;
margin-left: 40px;
}

#sponsor h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
text-decoration: underline;
}

#content {
margin-top: 220px;
margin-left: 310px;
margin-right: 325px;
}

#contact {
position: absolute;
bottom: 1000px;
right: 0px;
margin-top: 10px;
margin-right: 100px;
}

body {background-color: #FFFFFF; background-image: url(images/blueback.jpg); background-repeat: repeat; font-family: Arial; }


h1 { font-family: Arial; font-size: 12px; color: #469e36; }
h2 { font-family: Arial; font-size: 12px; color: #393C9C; }
h3 { font-family: Arial; font-size: 12px; color: #669966; }
h4 { font-family: Arial; font-size: 12x; color: #000000; }
h5 { font-family: Arial; font-size: 12px; color: #CC3333; }
h6 { font-family: Arial; font-size: 8px; color: #000000; }
p { font-family: Arial; font-size: 12px; color: #000000;}

contact{
position:absolute;
top: 500px;
left:0px;
}

---

Also, the contact is not formatting correctly- and everytime I "restore down" the page content jams up. I'm so stuck. As I said, this is my first project on my own. I appreciate any assistance!

[edited by: limbo at 9:35 am (utc) on Feb 5, 2010]
[edit reason] Examplified [/edit]

alt131

1:28 am on Feb 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi justachild,
As I said, this is my first project on my own. I appreciate any assistance!
Then you are doing really, really well ;)

Posting the code made the issues easy to spot, but check out the Guide to posting [webmasterworld.com], especially about "examplifying" code. (A moderator will probably be along to edit all the content that makes the site identifiable.)

Always validate your html and css w3org [validator.w3.org]- especially when things aren't working as expected. The validator messages can be difficult to interpret, but this will get the worst errors corrected:
  • Go to 
    <link rel="stylesheet" type="text/css" />
    , then delete the 
    <p align="left"><img src="images/ropebannersmaller.jpg" width="950" height="134" /> </head>
    from the next two lines. (HTML cannot be placed in a style sheet, or the document head ended part way through)
  • Go to the line above the opening 
    <body>
    tag and insert 
    </head>
    to close the document head before opening the body (but after the stylesheet is closed).
  • Immediately below the 
    <body>
    there is an open <p>. From the site design I suspect it might be intended to be the para I just told you to remove from the stylesheet in the head. If so, insert the code you want for the <p> (and close it). Otherwise delete the stray <p> - a para cannot contain an unordered list, and as it isn't closed it looks like a stray.
Those steps will produce validator messages that are easier to understand, and make it easier for the browsers to figure out what you want them to do with your code ;)

Now to the menu. Nested lists need to be in the form:
<ul>
<li>One</li>
<li>Two <!--Do not close the list item-->
---<ul>
---<li>Twoa</li>
---<li>Twob</li>
---<li>Twoc</li>
---</ul>
</li><!--Close the list item after the nested ul-->
</li>Three</li>
</ul>

Closing the list item before starting the nested ul is invalid, and invalid code leads to unexpected results (as you have found ;) It meant this rule:
#nav li ul {display:none;...}

wasn't being applied. That is because it applies to a ul that is contained inside an <li>. By closing the list item before opening the nested ul, the ul was not contained inside an <li>, so the browsers weren't sure how to interpret the invalid code.
#ie ignored the invalid closing </li> and treated the nested ul as if it was inside an open <li> - and then applied your css rule.
# Other browsers respected the closing </li> - which meant they didn't apply that rule - but they did apply 
#nav li {float:left;padding:9px 30px;position:relative;}
to the nested ul's list items - which explains why the subitems were being displayed (floated) "next to" the menu items.

I am not quite sure what you mean by the "restoring down" issue with the contact box, but get the above issues sorted first and then come back with more information. Also, if you haven't already, perhaps try the firebug extension for firefox - it is really helpful for identifying code issues.

justachild20

2:16 pm on Feb 5, 2010 (gmt 0)

10+ Year Member



OMG- You are awesome! Your tips totally worked wonderfully. It now shows up perfectly... YAY! The only other two issues I'm having.

1) The "Restore Down" issue I'm having... Everytime I I click the 'restore down' to not minimize it completely, but minimize the window partially, the positioning of it becomes entirely messed up and jammed together. I'm not sure what it is that is doing that, but it doesn't look good.

2) I can't seem to code this field box. I have a 'email address' text field so people can enter their email address, click submit and have it automatically be sent to someone's email address for them to add them to an email list.


Thanks again for your help! Appreciate it immensely.

justachild20

2:27 pm on Feb 5, 2010 (gmt 0)

10+ Year Member



Also, does anyone have suggestions as to where I can hire a designer to simply do a small flash slideshow (12 pics already resized with a simple fade effect)? I have CS4 but am finding Flash to be challenging to learn.

alt131

11:14 pm on Feb 6, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi justachild - and thanks for taking the time to let me know it helped ;) Makes it all worthwhile

1) Everytime I ... minimize the window partially, the positioning of it becomes entirely messed up and jammed together.
This is caused by using absolute positioning to position or "lay out" the elements on the page.

See the explanantion in the recommendations Visual formatting - absolute positioning [w3.org].
Relevant here is:
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely ... the contents ... do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

There is a mix of absolutely positioned elements (with/without widths), default positioning (#content), and some with a z-index (#nav) that explicitly sets the stack level. The result is that as the viewport changes size, the absolutely positioned elements redraw themselves relative to the viewport edge. Those with a higher z-index will draw themselves "over the top" of other elements, those without widths will "narrow" to try to squeeze in - etc.

I really recommend you look at the whole chapter on visual formatting, but at least Positioning Schemes [w3.org].

I can't seem to code this field box.
Not sure what you mean here - I have the original code, and it seems to be working as designed.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026