Menu
hi ?
I’m in a small trouble:
While creating a list based horizontal menu I’ve got some strange spaces between <li> elements, all CSS classes are fine and code is fine it seems. I tried several browsers (IE, Opera GRE-based) and all render the same thing. At the same moment I’ve found a website later where this was solved somehow. I even directly copied style and html parts from it but got the same artifact again. At first I thought it was a DTD issue since I’m using XHTML1.1 and the page where the menu renders fine uses HTML4.01, but after I changed the doctype the problem remained.
Here is the site with a correct menu as an example: [URL=http://mp3gain.sourceforge.net]http://mp3gain.sourceforge.net
I’ve already spent 2 hours trying to understand what produces these spaces and have really found nothing. Any suggestion would be great, if not to correct then at least to understand what attribute of which element is causing that.
Here are both versions of my test (xhtml, html and css respectively):
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.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=”ultest.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul>
<li><a href=”#” title=””>home</a></li>
<li><a href=”#” title=””>info</a></li>
<li><a href=”#” title=””>downloads</a></li>
<li><a href=”#” title=””>links</a></li>
</ul>
</body>
</html>
[code=html]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Untitled Document</title>
<link href=”ultest.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<ul>
<li><a href=”#” title=””>home</a></li>
<li><a href=”#” title=””>info</a></li>
<li><a href=”#” title=””>downloads</a></li>
<li><a href=”#” title=””>links</a></li>
</ul>
</body>
</html>
Maybe I exaggerated a little with margin=0 and padding=0 but I simply didn’t know what to do…
[CODE]
li{display:inline; margin:0px; padding:0px;}
ul{border:none; margin:0px; padding:0px;}
a{padding:5px; margin:0px;
border:1px #333333 solid;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px; font-weight:bold; color:#333333;}
a:active, a:hover {background-color: #CCCCCC;}