Boxing with CSS, Part II: No Margin For Error
Fencing in the Beasts
|
| ||||
| ||||
|
|
Navigator and Internet Explorer handle the border properties in rather different ways. We'll examine each in turn.
Using Border Properties in Navigator
Navigator does not recognize all of the twenty border properties I have mentioned. The only ones it does recognize is border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-style, border-color and border. This means that you cannot set border color and border style for each side of a box individually; you have to have the same style and color on every side, using the shorthand properties. Navigator will ignore the properties that set style and color for individual sides. It will also ignore the border-top, border-right, border-bottom and border-left shorthand properties.
In addition, Navigator handles multiple values for the border-style and border-color properties really badly. In general, if any style other than the ones given in the description of the border style properties is given to Navigator, it will interpret it as outset. No, it doesn't make sense. If more than one color is given in the border-color property, Navigator will "mix" these colors and use the color that results for all four borders. No, that doesn't make sense either! To illustrate this, try giving Navigator the following:
P.border { border-width: 1em 0.5em 2em; border-style: solid double; border-color: red #E0E0E0; }
Navigator correctly interprets the border-width shorthand
and sets the borders to 1em on the top, 0.5em on the sides and 2em on
the bottom. However, the border style is set to outset on all
sides, instead of solid on top and bottom and double on
the sides. The same would have happened if you gave Navigator a value
of, say border-style: foobar; or anything other
than one of the border styles. The color conforms to no immediately
apparent logic. If you're lucky, then the first color you specify will
be used on all sides. Otherwise, an entirely arbitrary color is
used. I have no idea how Navigator figures out this color.
In other words, Navigator only understands borders that have the same style on all sides specified using the border-style property, and the same color on all sides specified using the border-color property. If you don't use these properties and only these properties, weird stuff is guaranteed to happen.
Furthermore, Navigator defaults to a color of black when no border color is given, when it should normally default to the color of the element as specified by the color property.
Another bug with Navigator is that when you set any border width to a value other than 0, then border-style is assumed to be solid. Let me explain why this is wrong. Consider the following ruleset:
P.withborder { border-top-width: 0.5em; }
If no other declarations apply to an element, then it has a default border style value of none on all sides. This means that no border should be drawn, even though a border width has been specified. Navigator, however, will draw a solid border on the top side despite this.
Using Border Properties in Internet Explorer
Internet Explorer mostly handles borders correctly, with a few small exceptions. Firstly, if no border width is set explicitly on any side of an element, and the style for that side is set to anything other than none, then Explorer draws a border on that side. Let me give an example of this:
P.leftborder { border-left-width: 2mm; border-style: double; }
Assuming no other declarations apply to the element, you would expect that a 2mm-wide double border should be drawn on the left side of the element, and no border on the other sides. Even though the other sides have a border style of solid, they have a border width of 0, so there should be no border. Instead, Internet Explorer draws a border around the other sides. This is easily avoided by using something like the following:
P.leftborder { border-width: 0; border-left-width: 2mm; border-style: double; }
If you remember cascading rules, the value in the border-left-width property is used for the left border width instead of the one in the border-width property because they have the same specificity but the border-left-width property is given after the border-width property. This will correct the problem and not cause problems with either the specification or Navigator.
In addition, Internet Explorer renders some border styles in a slightly strange way, as illustrated by the table in the section on border style properties
Now let's take a look at how Internet Explorer handles margins and padding.
