Alignment in HTML and CSS

This information is intended to help fixing Mozilla bug 192077. 30th August 2005: fixed.



HTML: ALIGN

What does the specification say

From HTML 4.01: Alignment:

What do the browsers do

I have used this testcase from Mozilla bug 192077.

Gecko (Mozilla, Firefox, ...)

Screenshot of Firefox 1.0.6

Konqueror

Screenshot of Konqueror 3.4.0

Internet Explorer

Screenshot of IE 6

Opera

Screenshot of Opera 8.02

CSS: vertical-align

What does the specification say

From CSS 2.1: vertical-align:

baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
super
Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
text-top
Align the top of the box with the top of the parent's content area (see 10.6.1).
text-bottom
Align the bottom of the box with the bottom of the parent's content area (see 10.6.1).
<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.
<length>
Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.

The browsers

As in HTML, I have used this testcase from Mozilla bug 192077.

The screenshots: Firefox 1.0.6, Konqueror 3.4, Internet Explorer 6, Opera 8.02.

Some browsers seem to show 1 px misalignments in a few cases, but I have ignored that, and report only the big disagreements.

baseline,
middle,
text-top,
super:
Same behaviour.
top:
IE renders it as it if were text-top, the rest agree.
sub:
IE renders it as it if were middle, the rest agree.
bottom:
Firefox and Konqueror seem to behave well. IE and Opera do another thing, which I don't understand.

HTML: ALIGN (non-standard)

These properties are not defined in any specification.

ABSMIDDLE,
BASELINE:
Same behaviour.
ABSBOTTOM,
CENTER:
Firefox and Konqueror, one way. IE and Opera, other.
ABSCENTER:
Mozilla does it differently from the other 3.
TEXTTOP:
Opera does it differently from the other 3.

The screenshots: Firefox 1.0.6, Konqueror 3.4, Internet Explorer 6, Opera 8.02.

Other info


Updated on 01-09-2005. Daniel Clemente Laboreo (web). n142857 #at/$/g-m-a-i-l-./-c-o-m