Click to See Complete Forum and Search --> : Menu lacks consistency


fab0990
03-10-2006, 06:45 AM
I have this menu that appears differently in both ie and firefox. It appears that ie adds some padding by default, does anyone know how to fix this? here is the code:

<!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>Untitled Document</title>
<style type="text/css">
<!--
#menu li{
border: 0px;
border-left: 1px solid #5A7F9C;
margin: 0;
padding: 0;
list-style: none;
}
#menu li a{
text-decoration: none;
color: #000000;
display: block;
width: 100%;
height: 13px;
padding-top: 1px;
font-family: trebuchet MS, trebuchet, Verdana,Arial,Helvetica; font-size: 12px;
}
#menu span{
padding-left: 15px;
padding-top: 0;
}
#menu li a:hover{
color: #990000;
}
-->
</style>
</head>

<body>
<ul id="menu">
<li><a href="index.php"><span>Main</span></a></li>
<li><a href="http://www.redgfxforums.com/"><span>Forums</span></a></li>
<li><a href="graphics.php"><span>Graphics</span></a></li>
<li><a href="photo.php"><span>Tutorials</span></a></li>
<li><a href="downloads.php"><span>Downloads</span></a></li>
<li><a href="affiliate.php"><span>Affiliate</span></a></li>
<li><a href="services.php"><span>Services</span></a></li>
<li><a href="vote.php"><span>Vote for us</span></a></li>
<li><a href="submit.php"><span>Submit</span></a></li>
<li><a href="contact.php"><span>Contact</span></a></li>
<li><a href="links.php"><span>Links</span></a></li>
</ul>
</body>
</html>

deep.dhyani
03-10-2006, 07:06 AM
#menu li{
border: 0px;
border-left: 1px solid #5A7F9C;
margin: 0;
padding: 0;
list-style: none;
line-height:13px;
}

fab0990
03-10-2006, 08:06 AM
Thanks for your help but unfortunately that didnt work

KDLA
03-10-2006, 08:16 AM
This:
list-style: none;
needs to be
list-style-type: none;

You also should go through and indicate margins for the elements lacking those values. FF and IE interpret those values differently. Assigning both padding and margin values will keep them from inserting default values in there.

KDLA

fab0990
03-10-2006, 08:17 AM
okay thank you.