Diagnosing layout problems in rendered HTML pages causes a lot of confusion. This was the case already in the "old days" when (mis)using tables for layout. It's even more confusing with CSS, particularly in view of the fact that most of the popular browsers did not succeed in implementing the specified box-model in their early CSS-supporting versions, and it's still by no means certain that users' browsers will be doing what the author intended.
A simple, but frequently overlooked, way to help with diagnosing these kinds of problem while reviewing your pages on the menagerie of browsers which you presumably keep for the purpose, is to specify coloured borders for the various block-mode elements, so as to reveal which of various adjacent elements is/are responsible for the observed placement, and whether the effect is due to margin, padding etc. (similar techniques were also possible back in the pre-css table-layout situation, using the "border" property of the "table" element).
As you may see if your browser is CSS-enabled, this technique has been used, purely for demonstration purposes, on the present page.
The suggested technique works fine for the borders. You cannot visualise the "padding" and "margin" in this way: the padding is defined to look the same as the background of the relevant element, whereas the margin is defined to be transparent (see CSS2 spec, "Box dimensions"), and you cannot change that. Nevertheless, the ability to visualise the borders is often a big help in understanding what the various browsers are doing.
NN4.* versions are somewhat of a special case. As the css.nu bugs page rather depressingly concludes about borders etc. in NN4:
Margin, width, padding, and border: all completely broken, but sometimes, some of them work some of the time
This is a paragraph. It has been explicitly closed, because some browsers (NN4 particularly) get confused otherwise.
This is a paragraph in a list item
This is a paragraph in a list item
As we have seen by the example with NN4, sometimes it happens that adding a border to an element causes the layout to change. Sometimes (as in the example above) the change is deleterious and would be best avoided. This isn't always the case: some authors have reported that specifying a border actually stabilises the behaviour of this or that browser and gets more reliable results, in which case you might consider retaining the border in the finished product but colouring it to be invisible.
In reviewing these techniques, you will need to be aware of the unfortunate issue of browser modes (quirks versus standards-conformance) and "DOCTYPE switching". The details are documented for the various browsers by their respective vendors, but also some excellent third-party overviews are available (and these are used as an excuse to exhibit the technique in action on a table):
| Title | Author |
|---|---|
| Doctype switching and standards compliance | Matthias Gutfeldt |
| Moving to Standards-Compliant HTML and CSS Authoring | Henri Sivonen |
| See also Picking a rendering mode | Eric Meyer |
(here again, NN4 demonstrated its confusion by not showing the cell margins).
Mozilla (and presumably other Mozilla-based browsers) report their rendering mode via the "View→ Page Info" menu.
Original materials © Copyright 1994 - 2006 by A.J.Flavell