o-dog
02-04-2006, 03:57 PM
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:
<!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 (http://www.monsterserve.net/menutest.html).
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
The code is below:
<!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 (http://www.monsterserve.net/menutest.html).
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