Box Model problems

Hi all

I have a simply 3 column layout.
Basically Im being caught by the IE bug, and no matter what i do, i cant get all 3 columns to line up correctly in both IE and Firefox.

I've tried the hack from glish.com but no luck. Or more so, I know Im not doing it right because I dont fully understand it.

Here is the page in question, and the CSS.

http://members.optusnet.com.au/lowlight/new/index.html

http://members.optusnet.com.au/lowlight/new/style.css

I know my coding where I've tried to implement the hack in the left column is wrong, so I would appreciate it if someone could guide me in the right direction here.
I just need both side columns to line up evenly with the middle column.

Hey there...

The Box Model refers to the width or height of a "box" as calculated by CSS. Essentially it's the left margin + left border + left padding + width of the element + right padding + right border + right margin (same for upper and lower). In other words, the width of a 100px div with a 5px margin, 5px of padding, and a 1px border is actually 122px.

Hacks are necessary for IE Win 5 and IE Win 6 (in quirks mode) because they calculate the box model differently-- the width of an element includes the margins, padding, border. I.E., a 100px div with a 5px margin, 5px of padding, and a 1px border is 100px.

The idea behind the glish BMH (box model hack) is called the Tantek BMH. It sets the IE5 value first, then gives it a weird bit of hack-ness to freak IE5 out (that's what the "voice-family: "\"}\""; voice-family: inherit;" thing is), then sets a value for real browsers. The bit that comes after it (html > body {value}) is a "be nice to Opera" rule, because Opera trips up on the same thing, but gets the box model right.

Anyhow. Hopefully this explains the hack a little more. I was able to get things lined up by changing the top position to 124px on the left container.

Hope this helps,

Richard

Here's a link that explains it from the man who invented it:
http://tantek.com/CSS/Examples/boxmodelhack.html

yes, but when i change that to 124, it doesnt line up in firefox
:rolleyes:

Well, it works from here (see attached screenshot).

ok i will give it another try. thanks