More css wooes

Simebaby · 25 Apr 2006 at 23:49

Hi All

I've got yet more problems - this time with unordered lists displaying differently in IE6 and FF1.5. I have the following CSS:

Code:

html, body {
		 background-color: gray;
		 height: 100%;
}

ul#pricebody, ul#pricebody li {
  list-style: none;
	float: left;
}

ul#pricebody {
	margin: auto;
	margin-top: 50px;
	background-color: pink;
}

ul#pricebody li a {
	width: 100px;
	height: 100px;
	margin-left: 35px;
	margin-right: 35px;
	display: block;
	background-color: yellow;
}

And this html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="menu">
<ul id="pricebody">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>

In Firefox, the first margin is wider than the rest - I think this is actually an "extra" block that comes from the <ul>, not attached to the <li> or <a> elements. This extra block is absent in IE6, but the leftmost margin is displayed in IE where the first actual <a> element is displayed in FF - which means the block of links is further to the right in IE.

Apologies for the rubbish explanation - feel free to copy the code above and have a play.

TIA

Si.

Simebaby · 26 Apr 2006 at 10:12

That's got rid of the extra block in FF - thanks.

So does the <ul> element have padding by default?

Now I need to figure out why the block starts further to the right in IE....

Simebaby · 26 Apr 2006 at 10:31

Sorted - adding a margin-left: 0; to the ul#pricebody element fixed it. Does anyone have an explanation as to why this happens? I'm guessing different default values for IE and FF, but it would be nice if someone could confirm this.

Simebaby · 26 Apr 2006 at 13:14

That's a great help - it all makes sense to me now.

Thanks.