simulating Compliance box model in Quirks mode

Discussion in 'CSS' started by winterheat, Mar 9, 2008.

  1. #1
    Sometimes we are forced to use Quirks mode (such as embedding code in other people's profile box, etc).

    In that case, IE will show the box model by putting the "padding and border" inside the width and height, while Firefox and Safari will put it outside, the same as the CSS box model.

    Now, to hack around it, there is these solutions:

    http://webdesign.about.com/od/css/a/aaboxmodelhack.htm

    what is known as Tan hack or is it the same as Tantek hack... and it involves exploiting other bugs in the browser...

    but I wonder, why don't we just declare 3 div's


    <!-------------------- The code for Quirks mode -------------------->

    <body style="background:yellow">

    <div style="width:360px; height:360px; margin:0px; padding: 0px; border: 0px">
    <div style="padding:20px; border:10px solid black;background: orange">
    <div style="height:300px;width:300px;margin:0px;padding:0px; border:none;background: orange">

    Hello World

    </div>
    </div>

    </div>

    </body>

    to simulate the compliance mode:

    <!--------------- The code for Standard Compliance mode --------------->

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <body style="background:yellow">

    <div style="width:300px; height:300px; margin:0px; padding: 20px; border: 10px solid black;background: orange">

    Hello World

    </div>

    </body>


    So code #1 can simulate code #2, and it renders the same in IE and in Firefox, without having to exploit any bug in browsers.

    and code #1, even if it is used in Standard Compliance mode, it would still render the same, regardless of what mode it is in...
     
    winterheat, Mar 9, 2008 IP