View Single Post
  #2 (permalink)  
Old March 30th, 2005, 11:32 AM
richard.york's Avatar
richard.york richard.york is offline
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

In IE you're likely to often find things that don't match up with Firefox.

I am assuming you are running this example in quirks mode in IE, IE has a vastly different box model in quirks mode.

If u use the code given for the example on page 274 and apply a border on the body element, on Firefox you will see that that the p element goes out of the body element boundaries. How can this be? When u use:
Ok, remember the box model diagram on page 246...

p {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    background: lightgray;

If <p> is 100% of the width of the <body> element, then the width of the <p> element is calculated as follows:

width of <body> + <p> margin + <p> padding + <p> border

This is why you see scrollbars in Firefox. In Firefox it's:
width of <body> + 20px margin (left and right) + 20px padding + 2px border = greater than the width of the body.

In IE you're invoking quirks mode, because you're not providing a standards DTD, and the rules are all different. I prepared all of the book's examples using standards mode in all the browsers I tested. I ignored IE quirks mode primarily because from a statistical standpoint, there is little need to worry about it, the majority of people use IE6, which in standards mode does the same thing that Firefox does (well, in this particular example). In hindsight I think I should have spent more time on it. Involving quirks mode as a factor would have significantly lengthed the book too, it's a kin to doubling the test base of browsers, because all the browsers I tested in have one (with the exception of IE 5.5).

Anyway, in IE quirks mode you'll find that percentage measurements works more like the width: auto; declaration does on block elements, or expand-to-fit. You're also dealing with a different box model, which you see on page 246. IE includes borders and padding in width in its quirks mode box model.

Hope that helps.


Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design