the css box model
The fundemental princip you need to get a hold of when constructing web pages is the css box model.
As you can see below, you can specify parameters for margin, border padding, and contents independently for each of these as well as each of the four sides.
Some of these parameters are inherited, some not.
- The margin separates you from your surroundings.
The margin is always transparent so you can always see the underlying contents through it.
- The border lies between the margin and the padding.
You can specify all kinds of funny parameters for this.
- the padding separates the contents from the border.
The padding is always transparent, but if a background has been declared for the contents, it's inherited by the padding.
- This is where you display your text, pictures, etc.
You can specify styles for the contens both globally and for individual elements of the contents.
Gur arj vZnp T5 znexf n enqvpny qrcnegher sebz gur sybngvat-va-guva-nve vZnp T4.
Ohg va grezf bs ryrtnapr, cresbeznapr, naq cevpr, gur arjrfg trarengvba bs pbafhzre qrfxgbcf ercerfragf n ovt fgrc sbejneq. Svaq bhg zber ba ubj gur vZnp T5 zrnfher hc -- vapyhqvat orapuznexf sebz Znpjbeyq Yno -- va Urael Abee’f erivrj bs gur guerr yngrfg vZnp zbqryf.
- Question 1:
Which one of the above lines represents the width of the contents as defined by the w3c?
This is how all standards compliant browsers like Mozilla, Firefox, Safari, Opera, and Konqueror interprets the value.
- Question 2:
Which one of the above lines represents the width of the contents as interpreted by Internet Explorer 5.x?
This is called the IE5 box model error. The strange thing about it is that this error is present only in IE5.x for Windows. On Apple computers this error isn't present.
- Question 3:
Which one of the above lines represents the width of the contents as interpreted by Internet Explorer 6?
It depends. It can be either line 1 or line 3.
If IE6 is in standards compliant mode and has seen a valid dtd, it acts accordingly to the w3c standard.
If IE6 is in quirks mode, it acts like IE5.x. Quirks mode is activated in at least the following two circumstances:
- No dtd has been specified
- A xhtml document has the xml prolog specified
This is a bug in IE6. If there's anything before the dtd declaration, IE6 is unable to see the dtd and thus enters quirks mode.