Menu
hi, im doing a simple <ul>. the problem is the spacing between the <li> looks fine in firefox and opera, but not in IE. The top and bottom spacing is alot. Anyone knows how to fix this?
here is my code:
index.html
[code=html]<html>
<head>
<title></title>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>
<body>
<h3>Options</h3>
<div id=”sidebar1″>
<ul>
<li><a href=”” class=”nav1″>text1</a></li>
<li><a href=”” class=”nav1″>text2</a></li>
<li><a href=”” class=”nav1″>text3</a></li>
<li><a href=”” class=”nav1″>text4</a></li>
<li><a href=”” class=”nav1″>text5</a></li>
</ul>
</div>
</body>
</html>
style:
[CODE]#sidebar1{
float: left;
width: 270px;
clear: left;
margin: 0 0 2em 0;
}
#sidebar1 ul{
list-style: none;
padding: 0;
margin: 0
}
#sidebar1 li{
list-style: none;
padding: 0;
margin: 0
}
#sidebar1 a{
display: block;
border-bottom: 1px solid #d6d8d9;
padding: 2px 10px 2px 10px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
a.nav1:link,a.nav1:active,a.nav1:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:600;
color: #ee3576;
text-decoration:none;
}
a.nav1:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:600;
color: #ee3576;
text-decoration:underline;
}