SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IS this correct?

    Hi all,

    I got this code from the FAQ section here "How set footer at the bottom"

    * html #outer{
    height:100%;
    width:768px; /* box model hack for ie5.+*/
    w\idth:766px
    }


    Can any one explain why this is needed and starts with * html?

    Also the third line "w\dith:766", is the backslash a typo and why there is no semicolon at the end. Is that also a typo?

    Regards

    Explorer

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    * html is only visible to IE6 and lower. It doesn't make sense because <html> is the root element, so there can be nothing before it in a CSS selector, so the * is meaningless. Good browsers ignore this rule, but IE6- implement it.

    The w\idth one is for IE5, as the comment says. Since the entire block is for IE (because * html is only understood by IE6-), this only applies to IE. IE6 parses w\idth as "width" when it is in standards mode and so for IE6 the width is 766px, but for IE5 it's 768px.

    These two things are part of the famous "box model hack" made to compensate for IE6 and below's inferiority regarding the W3C box model (this however does not apply to IE5 on the Mac or IE6 when it is in standards mode). If you google for "css box model hack" you'll find lots of explanations. In this particular case I am guessing that #outer has been given a border in some other rule. IE6 in standards mode correctly adds the border width to the overall width, but IE5 includes it in the width. That is why they need to be given two different widths in this case.

    However, normally you should be able to design a page where a 1px difference at either side should not matter, but lots of people aim for pixel perfection, which can create lots of problems, especially given all the browser incompatibilities and rendering idiosyncrasies.

    The last semi-colon is optional. It's not strictly necessary when it's the last declaration in the declaration block. Personally I only omit it when there is only one declaration and I am putting the whole rule on a single line, but it's a matter of personal preference.


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
  •