Hey
I have basic layout started. but when i apply the margin-left property to one of my divs (its a nested div, which may be the problem?) it works as expected in Mozilla, however in IE (version 6) it adds a little bit more. I cant seem to fix it, its driving me insane.
Any help will be greatly appreciated!
The div im having problems with is called "leftcol".
Heres the
XHTML file code:
- Code: Select all
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div class="outerbox">
<ul id="navlinks">
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="leftcol">
<p>test sentance
</p>
</div>
<div class="clear"></div>
</div>
<div id="bottombox"></div>
</div>
</body>
</html>
Heres the
CSS:
- Code: Select all
*{
margin: 0;
padding: 0;}
body{
margin: 0;
padding: 0;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
background: black url(images/1.jpg);
font-size: 0.7em;
}
#container{
text-align: left;
margin: 100px auto;
width: 714px;
}
.outerbox{
background: url('images/top.gif') no-repeat;
width: 714px;
height: 59px;
}
#wrapper{
padding: 0;
background: transparent url("http://www.webmaster-talk.com/images/middleouter.gif") repeat-y center;
width: 714px;
height: auto;
}
#leftcol{
width: 260px;
margin-top: 10px;
margin-left: 20px;
float: left;
background: #0099CC;
}
#bottombox{
background: transparent url('images/bottomouter.gif') no-repeat;
height: 37px;
width: 714px;
}
.clear{
clear: both;
}
ul{
list-style-type: none;
padding: 30px 0 0 0;
}
#navlinks li{
display: inline;
margin-left: 90px;
color: #CCFF00;
font-weight: bold;
font-size: 1.2em;
}
thanks again!