Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

    Edit: Here's a link that explains it from the man who invented it:
    http://tantek.com/CSS/Examples/boxmodelhack.html
    Last edited by rmedek; 02-16-2005 at 07:48 AM.

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, but when i change that to 124, it doesnt line up in firefox

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, it works from here (see attached screenshot).
    Attached Thumbnails Attached Thumbnails Box Model problems-screenshot.jpg  

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i will give it another try. thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •