Tags:








Help me with this CSS box model problem!
May 26, 2004 8:59 PM   RSS feed for this thread Subscribe

CSS question. Usually, I can figure these things out. This one has me stumped. I know its a box model problem, but none of the usual fixes seem to fix it. Everything looks right in Mozilla, Firefox, and Opera. Bigger, better explanation inside, along with some code.

OK. Here's the code:
<!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" xml:lang="en">
<head>

<title>Moron</title>
<style type="text/css">
body {
top: 0px;
left: 0px;
background:black; /*#ECEED9;*/
text-align: center;
font-size: 12pt;
}

#center {
text-align: center;
padding: 0px;
}
#page {
background: white;
margin-top: 50px;
margin-bottom: 50px;
width: 867px;
height: 1194px;
border: 1px solid red;
padding: 0px;
}

#textblock {
background: white;
padding: 0px;
margin-left: 313px;
margin-right: 89px;
margin-top: 89px;
margin-bottom: 133px;
width: 465px;
height: 972px;
border: 2px solid green;
}

.wrap {
text-align: left;
border: 3px solid red;
}
#leftcol {
border: 2px solid green;
position: absolute;
top: 89px;
left: 2em;
background: #F7F4EB;
width: 135px;
height: auto;
padding: 0px;
margin-left: 2em;
margin-top: 89px; /*added*/
margin-bottom: 133px; /*added*/
text-align: left; /*added*/
}
#header {
position: absolute;
width: 865px;
background: white;
border: 1px solid blue;
font-family: "bitstream vera sans mono", "courier new", courier, mono-space;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 0.1em;
margin: 12px 0 0 0;
padding: 0px;
}
#foot {
position: absolute;
top: 1215px;
width: 865px;
background: white;
border: 1px solid blue;
font-family: "bitstream vera sans mono", "courier new", courier, mono-space;
font-variant: small-caps;
font-size: 7pt;
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<div id="center">
<div id="page">
<p id="header">this is the header</p>
<div id="textblock">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus. Aenean porta urna ac ligula luctus tincidunt. Aliquam ullamcorper lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas mollis urna ac arcu imperdiet sodales. Phasellus mattis tempus sem. Donec dui. Curabitur varius volutpat pede.</p>
</div>
</div>
<div id="leftcol">
<ul>
<li>link1</li>
<li>link2</li>
</div>
<p id="foot">this is the footer</p>
</div>
</div>
</body>
</html>
posted by Grod to computers & internet (11 comments total)
The problem is this. In IE the #header and #foot objects are way off to the right, their left edge appears to align with the left edge of the #textblock. Also, IE is ignoring the margin on the top of the #textblock and pulling it flush to the edge of the #page block.

The borders, by the way, are just so I can visualize what I'm doing.

See it in action here

I can fix the textblock problem by adding this:

* html #textblock {
position: relative;
top: 89px !important;
}

but I'm not certain what to do about the header and footer, or the disapearing margin below the #page box.
posted by Grod at 9:11 PM on May 26, 2004


oops, forgot to close that list in the example. It's a simplified version of what I'm trying to do, anyway.
posted by Grod at 9:11 PM on May 26, 2004


Oh, and one last thing. that #center is redundant and is a holdover from an earlier experiment to fix this prob.
posted by Grod at 9:18 PM on May 26, 2004


header and footer are centered with regards to page in safari and ie mac.
posted by rhyax at 10:48 PM on May 26, 2004


Thanks, I suspected they would be. This is definately a winIE box model bug. I just can't figure out which one it is.
posted by Grod at 11:08 PM on May 26, 2004


I'd use padding instead of margin for the textblock to eliminate the possibility for unexpected margin collapsing (vertical margins in CSS "collapse" to the largest single value instead of adding them all together) and make the header and footer position: relative instead of absolute. You can still make the footer be at the bottom of the page by keeping track of the height of #page if that's what you want.

But I am a tinkerer, not a master. I usually just keep playing until a layout works. The above makes it work in IE, but it would still need tweaking because the changes throw off the measurements for your very specific page heights.
posted by Nothing at 11:31 PM on May 26, 2004


Yeah. I thought of using relative positioning, but then the margin on the #textblock will count relative to the header, which, as you noted, throws things off. This is an experimental layout, but I intend to use it if I can iron out the bugs. I'll try using padding and see how it goes.
posted by Grod at 11:38 PM on May 26, 2004


problem solved, although I'd appriciate it if someone with a mac could test for me. The messed up page is here and here is the fixed version. For those who are curious please view source as I don't want to clutter up this thread. Everything validates, and looks correct, but damn it's ugly with so many hacks.
thanks all.
posted by Grod at 12:54 AM on May 27, 2004


Ease off the Ask MetaFilter posting throttle, Grod. You're pulling an oissubke, and this sort of thing always ends in tears.
posted by Danelope at 1:14 AM on May 27, 2004


in the fixed version page is centered relative to the window, while in the unfixed it is left justified, also leftcol and textblock are horizontally aligned while in the unfixed they are not. (safari)
posted by rhyax at 1:25 AM on May 27, 2004


problem solved, although I'd appriciate it if someone with a mac could test for me.

Works in Safari and FireFox, but in IE 5.2 the link box floats up over the header.
posted by timeistight at 9:05 AM on May 27, 2004


« Older Exam time. 2 weeks until some ...   |   The Pilgrimage of St James, al... Newer »
This thread is closed to new comments.