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

uchuff · 4 Feb 2006 at 20:01

It's to do with the way you floated the nav list, add clear:both; to the content div to fix. Slightly off topic but your CSS should be in the head of the document, also you have an extra div that you don't really need, I have removed this in the paste 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" >

<head>
<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;
padding-left: 0;
margin-left: 0;
background-color: #ABCA7A;
float: left;
width: 100%;
border-bottom: 1px solid black;
}

#navlist li
{
display: inline; 
}

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

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

</style>

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

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

If you don't have it already grab the Web Developer Extension for firefox, its better than sliced bread.

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

uchuff · 4 Feb 2006 at 20:17

The nav list was floated over the content div (you can see this by using the code in your original post and changing the top padding to something like 20px). The clear:both; tells the browser that you want the div to appear below floated elements on both sides, in this case clear:left; would have been sufficient.

Yes, it's always best to try solving layout issues purely in CSS and only resorting to adding extra elements if all else fails.

You can float all sorts of things, play about with floats and display:inline; display:block. If you grab the extension from my last post, the 'Outline > Block level elements' command will be a godsend for layouts.