Forum Moderators: not2easy
My site -- mostly a simple, quite narrow two-column layout -- is up and running, and looking sharp in IE7, FF, etc.
However, despite what I think is the right doctype declaration (see below), IE6 seems to be rendering in Quirks mode. My right-hand column gets bumped down below my left-hand column.
So, I've been trying to apply a box model hack to fix the situation, but it's been a while since I did this and I haven't had any success. I think my problem is not applying the hack (I'm using Çelik's) in the right place, or maybe not applying it correctly at all.
Below is my pre-hack CSS. These are the potentially relevant bits only. Sorry it's not really efficient right now; I've been using Coda and plan to clean it up only once I'm firm on the design.
Below that is potentially relevant HTML. Sorry the [ code ] tags aren't working; I'm a new poster here. But you can figure out the indentation, I'm sure.
Let me know how you would go about fixing this problem -- whether you would use one hack or another, use another doctype, or find another way around.
Thanks,
D.
CSS:
#page {
background-color: white;
text-align: left;
margin: 0px auto;
width: 474px;
}
.narrowcolumn {
border-color: #f9c75d;
border-style: solid;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 1px;
border-top-width: 0px;
margin-left: 12px;
margin-right: 4px;
float: left;
width: 301px;
}
.post {
font-size: 1.1em;
padding-right: 4px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
border-color: #f9c75d;
border-style: solid;
border-left-width: 0px;
border-bottom-width: 1px;
border-right-width: 0px;
border-top-width: 0px;
}
#sidebar {
margin-left: 4px;
float: right;
width: 152px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<body>
<div id="page">
<div class="narrowcolumn">
<div class="post">
</div>
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>
narrowcolumnHere's my test code (I simplified the border declarations a bit, but it is ostensibly the same as yours apart from the width):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#page {
background-color: white;
text-align: left;
margin: 0px auto;
width: 474px;
}
.narrowcolumn {
border-right:1px solid #f9c75d;
margin-left: 12px;
margin-right: 4px;
float: left;
[b]width: 289px;[/b]
}
.post {
font-size: 1.1em;
padding-right: 4px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
border-bottom:1px solid #f9c75d;
}
#sidebar {
margin-left: 4px;
float: right;
width: 152px;
}
</style>
</head>
<body>
<div id="page">
<div class="narrowcolumn">
<div class="post">
post here
</div>
</div>
<div id="sidebar">
sidebar here
</div>
</div>
</body>
</html>Note that once you're using standards-compliance mode (the full doctype, obligatory for CSS layouts these days), then the Tantek/box-model hack is no longer required, as IE5.x support is rarely a requirement these days.
