Hi everybody,
I'm having problems with the following pieces of html & css (sorry, I
can't put them on a website here, so I had to post them).
Basically, it's a menu with some sub elements. In Opera and IE the menus
show correctly, but in FireFox the sub elements don't have any margin
below them.
Would anybody care to explain why? I'm at a loss here...
Thanks in advance!
Here is the code:
--- html code ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Main 1</a></li>
<li><a href="#">Main 2</a></li>
<li id="sub"><a href="#">Sub 1</a></li>
<li id="sub"><a href="#">Sub 2</a></li>
<li id="sub"><a href="#">Sub 3</a></li>
<li><a href="#">Main 3</a></li>
<li><a href="#">Main 4</a></li>
<li><a href="#">Main 5</a></li>
</ul>
</div>
</body>
</html>
--- css ---
#menu
{
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul
{
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}
#menu li
{
margin-bottom: 4px;
}
#menu li a
{
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
}
#menu li a:hover
{
background: #eaeaea;
color: #286ea0;
}
#menu li#sub
{
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
background: #f4f4f4;
margin-left: 10px;
}
Best regards,
Ikke
