Multi-tasking: Screwing everything up simultaneously.

Table Captions and Internet Explorer

Filed under: Accessibility

If table captions are block level elements, why doesn’t Internet Explorer 7 honour off-left positioning?

“The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal blocks inside the anonymous box.”
W3C CSS 2.1 Specification

Example page

The relevant CSS on this page is:

caption {
	position:absolute;
	top:-1600px;
	left:-1600px;
}

This is honoured by Firefox 2 and Opera 9 but not by IE 7, so I need an IE specific fix that doesn’t use display:none; as it’s essential that the caption is available to screen reader users.

Thus far, I haven’t come up with a suitable solution.

Update: 15th May 2007

Thanks to Nick Dunn, we have a workaround! Namely:

table {
	margin-top:-1em;
}
caption {
	text-indent: -1600px;
}

The negative margin-top isn’t essential but does remove the ‘gap’ left when the caption is indented off to the left. I prefer setting this in ems myself so that resizing the text will still keep everything in proportion.

And, according to the Screenreader Visibility Test Results, the caption should still be available to all of the common screenreaders (although JAWS 7 needs checking).

Published: May 8th 2007

4 Comments

  1. Nick Dunn

    I could try setting the line-height and font-size to negligible sizes, and indenting it off the page.
    caption {
    line-height: 0;
    font-size: 0;
    text-indent: -1600px;
    }

  2. Black Widow

    I also thought of using the same colour for background and text. But I’m wary of anything that might smack of spamming from the perspective of a search bot.

  3. Nick Dunn

    Would visibility: hidden be appropriate?

    You could then shift the table up by about 10-15px with a negative margin-top.

    Changing the colour sounds the most spammy to me, but text-indent feels like legitimate practice.

  4. Black Widow

    Nope. visibility:hiddencaption usage.

    However, the negative tex indexing works a treat with a negative margin-top of around 1em on the table. Now why couldn’t I think of that?

    Cheers! :-)