IE firefox Float issue - displays differently

O-Dog · 4 Feb 2006 at 19:49

Hi, im having some trouble with the way ie and ff deal with floats. As i understand it (and not very well at that!), firefox deals with them correctly whereas and ie doesnt. What i want is to display the text the way internet explorer does (but in firefox!). I guess im not coding correctly :'(. How can i get it so both browsers look the same with the 10px padding?

The code is below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<style type="text/css" media="screen">

* {
padding:0;
margin:0;
}

#container {
	position:relative;
	text-align:left;
	margin: 0 auto;
	width: 500px;	
	margin-top:20px;
	border: dashed 1px black;
}

#navlist {
font-weight:bold;
}

#navlist ul {
padding-left: 0;
margin-left: 0;
background-color: #ABCA7A;
float: left;
width: 100%;
border-bottom: 1px solid black;
}

#navlist ul li
{
display: inline; 
}

#navlist ul li a
{
	color: #393939;
	text-decoration: none;
	float: left;
	border-right: 1px solid black;
}

#content
{
padding: 10px 10px 10px 10px;
}

</style>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Untitled Document</title>
</head>

<body>
	<div id="container">
	<div id="navlist">
		<ul>
			<li><a href="#">first</a></li>
			<li><a href="#">second</a></li>
		</ul>
	</div>
	<div id="content">
	  <p>this text should have 10px padding all the way round!</p>
	</div>
	</div>
</body>
</html>

Ive uploaded the site here.

Is there any way to do this with div id's (i am using div id's because of the way im laying my site out, much like css zen sites).

TIA.

Chris

O-Dog · 4 Feb 2006 at 20:07

kick ass that works a treat. was it to do with ff treating floats correctly? Why does clear on the content div work?

I did some browsing just now and added <div style="clear:both"></div>, that worked too.

Code:

<body>
	<div id="container">
	<div id="navlist">
		<ul>
			<li><a href="#">first</a></li>
			<li><a href="#">second</a></li>
		</ul>
	</div>
<div style="clear:both"></div>
	<div id="content">
	  <p>this text should have 10px padding all the way round!</p>
	</div>
	</div>
</body>

I know images use some kind of float and clear stuff, will i still be able to float images in my content div? Many thanks for the fast response, i much much prefer your way over <div style="clear:both"></div>

Cheers

Chris

IE firefox Float issue - displays differently

O-Dog

O-Dog

O-Dog

O-Dog