problem with unordered list margins in IE [Archive]

mhunt

06-07-2005, 06:59 PM

ok here is what it looks like in firefox:FireFox_img (http://nextstepdevelopments.net/mark/second_layout.jpg)
and here is what it looks like in IE:IE problem (http://nextstepdevelopments.net/mark/ieproblem.JPG)

Now in the css I have to set the left margin for the ul tag to -39px in order to get it to show up correct in firefox
but then it messes it up in IE, so if i make it 0, it looks fine in IE but messed up in firefox. I just can't win haha
here is the css and html.

<!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>MI-Devil Sports - Paintball Specialists</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#container {
margin: 0px 0px 0px 5px;
padding: 0px;
width: 742px;
height: 575px;
border: 1px solid #000;
}
#header {
background:url("banner.gif") no-repeat;
width: 742px;
height: 85px;
}
#navigation {
background: url("top.gif") no-repeat;
margin-left: 5px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
border: 1px solid #fff;
width: 152px;
}
#login {
width: 500px;
text-indent:5px;
position:absolute;
top:100px;
left: 175px;
}
#links {
background: url("links.gif") no-repeat;
border: 1px solid #fff;
width: 152px;
margin: 0px;
padding: 0px;
}
#content {
position: absolute;
top: 155px;
left: 185px;
width: 438px;
height: 500px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
#content_head {
background: url("content_top.gif") no-repeat;
background-position:top;
position:absolute;
top: 125px;
left: 177px;
width: 456px;
height:30px;
}
ul {
list-style-type:none;
text-align:left;
margin-left:-39px;
margin-top: 37px;
}
li {
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom:1px solid #000;
margin: 0px;
padding: 0px;
}
.links a {
text-decoration: none;
color:#000000;
background-color:#FFFFFF;
padding: 0px;
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
display: block;
}
.links a:hover {
color:#000000;
background-color:#00FFFF;
}
</style>

</head>
<body>
<div id="header">
</div>
<div id="container">

<div id="navigation" class="links">
<ul>
<li style="border-top:1px solid #000; "><a href="#">Guns</a></li>
<li><a href="#">Upgrades</a></li>
<li><a href="#">Drop Forwards</a></li>
<li><a href="#">Air Systems</a></li>
<li><a href="#">Mask / Goggles</a></li>
<li><a href="#">Hoppers</a></li>
<li><a href="#">Packs</a></li>
<li><a href="#">Barrels</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Equipment / Gear</a></li>
<li><a href="#">Paintballs</a></li>
<li><a href="#">Factory Gun Parts</a></li>
<li><a href="#">New Products</a></li>
<li><a href="#">Ebay Auctions</a></li>
<li><a href="#">Used Equipment</a></li>
<li><a href="#">Boost Hoppers</a></li>
<li><a href="#">Chips & Boards</a></li>
</ul>
</div>

<div id="links" class="links">
<ul>
<li style="border-top:1px solid #000; "><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="content_head"></div>
<div id="content">
</div>
<div id="login" class="links">
<form>
Email:
<input type="text" title="email" />
Password:
<input type="text" title="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
</html>

_Aerospace_Eng_

06-07-2005, 07:11 PM

A ul does have padding also. Set the ul's margin and padding to 0 then just add padding left and margin left. I can't remember off hand what it is to get them to look the same in IE nad FF I think its like padding-left:15px; margin-left:-7px; or other way around can't remember.

mhunt

06-07-2005, 07:15 PM

hey thanks a lot i set them like this:
margin-left:-7px;
padding-left:8px;

and they are lined up the same, so thanks a bunch :)

_Aerospace_Eng_

06-07-2005, 07:29 PM

Glad I could help.