Hi All,
I've been having real trouble with some css in both Win/IE6 and
Win/Firefox0.9.2 that doesn't make sense to me. I have a div that is
supposed to be spaced away from the top and right hand edges of it's
containing div and therefore I set suitable values for it's margins.
Unfortunately it refuses to move itself unless I give the parent div a
border.
Perhaps this will make more sense with an example (I've boiled the
problem down to a relatively small code sample):
--- START XHTML ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Template</title>
<link href="draft1_style2.css" rel="stylesheet" type="text/css" />
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
</head>
<body>
<div id="page">
<div id="content">
<h2>Segment Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisienim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim quiblandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisienim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim quiblandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="nav"><p>paragraph</p><p>paragraph</p><p>paragraph</p></div>
</div>
</body>
</html>
--- END XHTML ---
--- START CSS (draft1_style2.css) ---
body
{
background-color: black ;
}
#page
{
border: 1px solid #ffffff ;
position: relative ;
background-color: #ff0000 ;
}
#content
{
margin: 60px 110px 0 0 ;
background-color: #00ff00 ;
}
#nav
{
position: absolute ;
top: 60px ;
right: 0 ;
width: 110px ;
background-color: #0000ff ;
}
--- END CSS ---
To see what I mean try changing the border width attribute in the style
#page to 0.
