J
Jim Carr
I'm learning CSS (and loving it), but an example in "Designing Without
Tables Using CSS" fails in IE6. It works as I expect and understand in
IE7 and Firefox 2. I have whittled down the example to just the basics.
http://www.chesapeaketempe.com/fixedwidth.html
http://www.chesapeaketempe.com/fixedwidth.css
In IE7 the yellow sidebar appears to the left of the green content
section. This is what I expect.
In IE6 it picks up the 200px left margin and therefore aligns with the
content section. This appears to me to be a bug. Perhaps someone can
explain to me what I'm missing or a workaround to the bug.
fixedwidth.css
body {
margin: 0;
padding: 0;
min-width: 740px;
background-color: black;
}
#wrapper {
text-align: left;
width: 740px;
margin-left: auto;
margin-right: auto;
background-color: blue;
padding: 10px;
}
#content {
background-color: green;
border: 1px solid #f0f0f0;
padding: 0;
}
#content .inner {
margin: 30px;
}
#content-wrapper {
margin: 0 0 0 200px;
}
#main {
position: relative;
}
#extras
{
position:absolute;
background-color:Yellow;
top: 0;
left: 0;
width: 180px;
border: 1px solid #f0f0f0;
}
fixedwidth.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="fixedwidth.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p id="tagline">The Home of the Hack</p>
</div> <!-- header -->
<div id="main">
<div id="content-wrapper">
<div id="content">
<div class="inner">
</div>
</div> <!-- content -->
</div> <!-- content-wrapper -->
<div id="extras" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
</div> <!-- extras -->
</div> <!-- main -->
</div> <!-- wrapper -->
</body>
</html>
Tables Using CSS" fails in IE6. It works as I expect and understand in
IE7 and Firefox 2. I have whittled down the example to just the basics.
http://www.chesapeaketempe.com/fixedwidth.html
http://www.chesapeaketempe.com/fixedwidth.css
In IE7 the yellow sidebar appears to the left of the green content
section. This is what I expect.
In IE6 it picks up the 200px left margin and therefore aligns with the
content section. This appears to me to be a bug. Perhaps someone can
explain to me what I'm missing or a workaround to the bug.
fixedwidth.css
body {
margin: 0;
padding: 0;
min-width: 740px;
background-color: black;
}
#wrapper {
text-align: left;
width: 740px;
margin-left: auto;
margin-right: auto;
background-color: blue;
padding: 10px;
}
#content {
background-color: green;
border: 1px solid #f0f0f0;
padding: 0;
}
#content .inner {
margin: 30px;
}
#content-wrapper {
margin: 0 0 0 200px;
}
#main {
position: relative;
}
#extras
{
position:absolute;
background-color:Yellow;
top: 0;
left: 0;
width: 180px;
border: 1px solid #f0f0f0;
}
fixedwidth.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="fixedwidth.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p id="tagline">The Home of the Hack</p>
</div> <!-- header -->
<div id="main">
<div id="content-wrapper">
<div id="content">
<div class="inner">
</div>
</div> <!-- content -->
</div> <!-- content-wrapper -->
<div id="extras" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
</div> <!-- extras -->
</div> <!-- main -->
</div> <!-- wrapper -->
</body>
</html>