Tuesday, April 20, 2004

Left Align Captions in Firefox

In Firefox (and other Mozilla browsers I presume) when you try <caption align="left">caption aligned</caption> it does not behave as expected - the table contents is shifted to the right of the caption. To fix this the following CSS is used:

caption.left {
 text-align: left;
 caption-side: top;
 width: 100%;
}

To use on the page, the HTML code becomes this:

<caption align="left" class="left">caption aligned</caption>

However, using the following CSS is a better method (ignored by IE), as you do not need to change your HTML code:

caption[align="left"] {
 text-align: left;
 caption-side: top;
 width: 100%;
}

No comments: