Menu lacks consistency [Archive]

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">

</style>
</head>

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