SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which box model hack to use

    Seems like there are loads of box model hacks to fix IE/pc problems. Does it matter which one is used? Do some apply to certain situations better than others?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think there are pro's and cons in all of them. I've found that the voice family hack can cause strange layout problems but have been unable to pin down the exact cause so testing in the browers you want to support is necessary. (If you use the voice family hack then you cannot validate if media is set to screen it has to be set to all ( or aural of course).

    The simplified box model hack seems to work relatively ok in the newer browers.
    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    I still find the best way to code is to avoid setting padding/borders at the same time as setting widths/heights (athough this does incur an extra nesting if there are no inner elements avialable).

    Paul

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I still find the best way to code is to avoid setting padding/borders at the same time as setting widths/heights (athough this does incur an extra nesting if there are no inner elements avialable).
    I've just come across that problem when removing an unnecessary DIV. I'd rather code clean XHTML and put the hacks in the CSS instead. Pros and cons to both approaches though.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Pros and cons to both approaches though
    Yes I agree to a certain extent except that if the hacks you are using get fixed by the newer browser versions then your existing pages could become unstable.

    A similar situation has occured with the voice family hack (although it doesn't affect existing pages).

    Some people are using the voice family hack in IE6 but they are coding in quirks mode (either on purpose or inadvertently leaving the xml prologue in). In quirks mode IE6 uses the broken box model but unfortunately it understands the voice family properties so it feeds itself back the wrong widths/heights etc. IE5 will display correctly but IE6 won't.

    But as you say, cleaner xhtml is nicer and I suppose you only need to fix one css file if things change.

    However most of the time, I try and use this type of thing:
    Code:
    .outer {width:50%}
    .outer p {padding:5px}
     
    html:
    <div class="outer">
    <p>No hack needed and clean xhtml</p>
    </div>
    But I will use a hack if things start to get messy as I do like my pages to be tidy also.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are making a good point here Paul, when you suggest trying to find ways to avoid hacks by using a little different approaches for padding and sizes. I find it is usually possible to achieve the same results by thinking around the corner and applying styles to not only the object you want to influence, in regards of positioning issues. Sometimes it might be better to go the extra mile and staying clear of hacks which can always throw up new problems.
    But i agree, only to a degree that doesn't clutter the html too much.


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
  •