SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box Model Question

    Hi all,

    Do I always have to use the Box Model Hack when I set a width for a block element?

    Would I have to do it for below...

    also is it just IE5.x that needs it?

    thanks.

    Code:
      #leftcol {
           float: left;
           width: 175px;
           border-right: 1px solid #ccc;
           margin-bottom: 10px;
     }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It is just IE5.x that needs it.

    The simplified box model hack..
    Code:
    div {
      width: 100px;
      padding: 10px;
      border: 10px solid black;
    }
    div {
      \width: 140px; /* IE5.x only will see this */
      w\idth: 100px;
    }
    No, you wouldn't have to use the box model hack for your code above, Well... In modern browsers it would be 176px instead of 175px in IE5.x.

    In IE5.x the width is equal equal to the width property, final.
    How it is meant to be calculated is width + padding + border

  3. #3
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should also take into account your target audience - are enough of them still using IE5 that you still need to actively support it?
    Olly Hodgson
    thinkdrastic.net

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    And you need to ask yourself if adding the paddings/borders to the width is acceptable or not, in this case -1px width is very acceptable.

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd generally always try and support IE5x best I can and adding in the box model hack doesn't take a great deal of effort.

    I'd do it like this

    HTML Code:
    #leftcol { 
           float: left;
           width: 175px;
           border-right: 1px solid #ccc;
           margin-bottom: 10px;
           voice-family: "\"}\""; 
           voice-family:inherit;
           width: 174px;
    } 
    http://tantek.com/CSS/Examples/boxmodelhack.html

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I can't believe anyone would allow for that 1px in an obsolete browser. Sure if's going to break the design, fix it but 1px ?

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yeah that's a good option, I go for the 'set and forget' method myself, it doesn't matter what you stick in it later on..
    Code:
    *{padding:0;margin:0;}
    #leftcol{
      width:175px;
    }
    	
    #leftcol div{
      border-right:1px solid #ccc;
      padding:5px;
    }
    
    <div id="leftcol">
      <div>
        <p>12345</p>
        <p>12345</p>
        <p>12345</p>
      </div>
    </div>

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    I can't believe anyone would allow for that 1px in an obsolete browser. Sure if's going to break the design, fix it but 1px ?
    As you say, I probably wouldn't if it didn't break my design but most of my designs will have a series of columns to fit inside a container so that 1px may make the difference between a column dropping underneath or there being space at the end of the last column.

    I agree though that all4nerds solution is probably the best.

    Mark, your second solution is simply adding another div into the markup which isn't required

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I disagree
    The div isn't hurting a thing, and all4nerds example would have to be changed when the content inside it is changed, my solution enables me to get on with design and forget about catering for it's content when it get's updated.
    Plus, that solution also will break if you have margins on it's content, the border will be broken.
    Because we are dealing with columns - It is best to have the easiest maintainable code - who cares if there is a helpful div there, it does the trick.

    But, each to his own - both work.


Bookmarks

Posting Permissions

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