CSS Nav menu help

Discussion in 'CSS' started by leony, Dec 26, 2007.

0
  1. #1
    Hello,

    I am trying to implement a nav menu with submenus and the code for both html and css below. The problem is although IE displays the menu with an acceptable quality, firefox does not. Can you please tell me what the problem is?

    Thanks a lot. 

    
<!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=utf-8" />
<title>Untitled Document</title>


	

<link href="nav.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table id="css" width="250" border="0">
  <tr>
    <td id="position">

    <div id="menu">
            <ul>
              <li><a href="#">Menu 1</a> </li>
              <li><a href="#">Menu 2</a> </li>
                   
             <ul>
              <li><a href="#">Sub-Menu 1</a> </li>
              <li><a href="#">Sub-Menu 2</a> </li>
              <li><a href="#">Sub-Menu 3</a> </li>
              <li><a href="#">Sub-Menu 4</a> </li>
              <li><a href="#">Sub-Menu 5</a> </li>
     		</ul>
    		 </li>         
            
              
              <li><a href="#">Menu 3</a> </li>
              <li><a href="#">Menu 4</a> </li>
              <li><a href="#">Menu 5</a> </li>
              <li><a href="#">Menu 6</a> </li>

            </ul>
        </div>
    
    </td>
  </tr>
</table>
</body>
</html>
    HTML:
    CSS code: 
    
table#css {
	border-collapse: collapse;
	border: 1px solid #d3d3d3;
}
TD#position{
	padding: 3px;
	background-color:#e9e9e9;
}


#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#menu ul li {
	position: relative;
	font-family: Verdana;
	font-size: 10px;
	font-weight: bold;
	}

#menu ul li a {
	display: block;
	text-decoration: none;
	height: 1em;
	line-height:1em;
	color: #777;
	background: #C8C8C8;
	padding: 5px;
	border: 1px solid #e4e4e4;
	border-bottom: 0;
	}

#menu ul li a:hover{
	background-color: #fff;
	font-family: Verdana;
	font-size: 10px;
	color: #777;
	text-decoration: none;
}

#menu li {
position: relative;
}

/*
submenu
*/
#menu ul li ul li {
	position: relative;
	font-family: Verdana;
	font-size: 10px;
	font-weight: bold;
	margin-left:5px;
	padding-right:3px;
	
}
#menu ul li ul li a {
	
	background: #e4e4e4;
	border: 1px solid #fff;
	border-bottom: 0;
	border-left:0;
	border-right:0;
	
}
#menu ul li ul li a:hover {

	background: #fff;
	
}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 244px;
	
	}

li:hover ul, li.over ul { 
	display: block; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
    Code (markup):
     
    leony, Dec 26, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, the invalid markup might be a good start:

    <li><a href="#">Menu 2</a> </li>
    <ul>

    do we SEE a problem here?

    losing the extra pointless DIV around the first UL could also help (if for no other reason than reducing the UL LI UL LI nesting), losing the single element table could also REALLY help since that's just ASKING for the layout to /FAIL/ hard, and hiding all that code from IE Mac shouldn't even be necessary.

    Try this - it's a bit rough around the edges, but should do what you are trying to do:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta 
	http-equiv="Content-Type" 
	content="text/html; charset=iso-8859-1" 
/>

<title>Template</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

#menu {
	list-style:none;
	width:250px;
	padding:6px 0 5px;
	margin:8px; /* just so we can see it */
	font:bold 12px/12px verdana,sans-serif;
	background:#EEE;
	border:1px solid #DDD;
}

#menu li {
	display:inline; /* make IE behave */
}

#menu a {
	display:block;
	height:1%; /* haslayout */
	padding:4px;
	/* 
		If we set the margin on the anchor instead of padding on the
		UL, we can dodge MOST of IE 5.x/quirks width calc bug - only
		the 1px border remains as an 'issue' - BFD.
	*/
	margin:0 6px;
	text-decoration:none;
	color:#777;
	background:#CCC;
	border-bottom:1px solid #EEE;
}

#menu ul {
	list-style:none;
}

#menu ul a {
	padding-left:16px;
	background:#E0E0E0;
}

#menu a:active,
#menu a:focus,
#menu a:hover {
	background:#FFF;
}

</style>

</head><body>

<ul id="menu">
	<li>
		<a href="#">Menu 1</a>
	</li><li>
		<a href="#">Menu 2</a>
		<ul>
			<li><a href="#">Sub-Menu 1</a></li>
			<li><a href="#">Sub-Menu 2</a></li>
			<li><a href="#">Sub-Menu 3</a></li>
			<li><a href="#">Sub-Menu 4</a></li>
			<li><a href="#">Sub-Menu 5</a></li>
		</ul>
	</li><li>
		<a href="#">Menu 3</a>
	</li><li>
		<a href="#">Menu 4</a>
	</li><li>
		<a href="#">Menu 5</a>
	</li><li>
		<a href="#">Menu 6</a>
	</li>
</ul>

</body></html>
    Code (markup):
    About 3/5ths the HTML/CSS, visibly the same - well, except I bumped the font size to 12px - which is the smallest size I would EVER use on a website (hell, I get squirrely below 14px on fixed sizes)... at 10px large font/120dpi users will generally dive for the zoom control instantly on landing on your site.
     
    deathshadow, Dec 26, 2007 IP