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.

Fx-Overlord · 26 Apr 2006 at 09:23

Remove the padding form the UL element

ul#pricebody {
padding-left:0;
}

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.

Augmented · 26 Apr 2006 at 11:43

Simebaby said:
I'm guessing different default values for IE and FF, but it would be nice if someone could confirm this.

Correct, and the same for all other browsers (with different renderers). There is a default stylesheet applied by browsers that controls things like padding, margins and font-sizes e.g. <h1>s are, by default, rendered in a larger font-size than <h2>s, list elements are indented, and so on.

Many people work around these inconsistencies (particularly where paddings and margins are concerned, because they cause the most grief) by 'resetting' all default values. This is usually known as the 'universal reset', as it uses CSS's universal selector:

Code:

* { 
margin: 0;
padding: 0;}

You can also specify the selector as *, body, html { .. } to work around some browsers that don't apply the universal selector fully.

Use with care on an existing layout as it will remove all default values, which may cause more problems than it's worth. Better to use it on a new layout.

Simebaby · 26 Apr 2006 at 13:14

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

Thanks.