Boxing with CSS, Part II: No Margin For Error
Navigating the Box Jungle in Navigator
|
| ||||
| ||||
|
|
Navigator is even quirkier than Explorer when it comes to implementing the box model and the visual formatting model, but most bugs here are identifiable and treatable, if slightly more numerous.
As far as appearance goes, Navigator has the same default rendering as Explorer, but this is not due to a default style sheet or similar mechanism. Now that we have access to Navigator source code, we can confirm the suspicion that Navigator's layout (up to version 4.x) is not based on CSS. Navigator displays Web pages according to its own internal formatting mechanism, and then tries to add formatting using CSS property values. This is where the problem starts.
The Invincible BODY Margin
First, let's look at BODY, which, like Explorer, Navigator handles incorrectly. The default margin around the BODY element in Navigator cannot be controlled through CSS. In essence, BODY has a default CSS margin width of 0, and an "involatile" margin around the normal one that cannot be changed through CSS. As a matter of fact, this margin can be changed by using some propriatary attributes to the BODY element, but since these attributes are invalid HTML, we'll take a look at them together with other proprietary extensions in a future tutorial.
The Swiss Cheese Background
Moving on to the box model in general, Netscape has a bit of trouble here as well. Most of the trouble revolves around the use of borders. If an element does not have a border, then the background color is painted only where there is text. In the following example, this is demonstrated, as we have three paragraphs. The first one is left-justified, with no border and a background color. The background color does not form a box around the element as it should (remember, background should be drawn behind the content and padding of an element), but is only behind the text, forming a jagged edge on the right side of the element. In the second paragraph, the text is justified, and the background is not painted in the spaces that Navigator has added between the words in order to justify the paragraph, giving a very unsightly effect.
P { background-color: cyan; } #second { text-align: justify; }
The Invisible Padding
So, justifying the text in order to give it a nicer feel doesn't work. Another fix you might have thought of, if you're a particularly quick thinker, is to add a border around the element with the same color as the background. That's a nice idea, and it would work too, if it wasn't for the next bug we're coming to. Navigator always inserts an extra 3 pixels of transparent "padding" between the element's padding and border, no matter what you do. In the following example, you see the background correctly rendered as a square behind the element, but there is a 3 pixel space between it and the border.
P { background-color: cyan; border: solid medium cyan; }
The only way around this bug involves turning elements into layers (a Navigator proprietary extension) through CSS positioning, and is fairly complicated. We'll mention it in a future tutorial when we talk of CSS positioning and layers.
The Jagged Edge
Another thing you might have noticed is that the left edges of non-justified paragraphs are not aligned with each other. This is best illustrated if a border is put around both paragraphs and their parent.
P { background-color: cyan; border: solid medium cyan; } DIV { border: solid medium red; }
The second paragraph, although narrower than the first one (assuming you've made your Navigator window large enough), normally occupies a box as wide as its parent's content area. But here, the box is only as wide as is needed to contain the element's content. This creates an uneven right edge when many paragraphs are on the same page. This basically means that the left margin has a value of auto instead of 0, the normal default.
Thankfully, the workaround for this bug is fairly simple: you have to explicitly set the margin-left property to either 0 (the normal default) or the value you want to use. With this modification, our document appears as expected:
P { background-color: cyan; border: solid medium cyan; margin-left: 0; } DIV { border: solid medium red; }
