I staggered into a Manchester bar late one night on a tour and the waitress said "You look as if you need a Screaming Orgasm". At the time this was the last thing on my mind... Terry Pratchett on alt.fan.pratchett

Table Captions and Internet Explorer

Filed under:

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).

Top

4 Comments

  1. Comment by Nick Dunn on May 15, 2007 at 11:18 am

    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. Comment by Black Widow on May 15, 2007 at 11:44 am

    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. Comment by Nick Dunn on May 15, 2007 at 12:16 pm

    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. Comment by Black Widow on May 15, 2007 at 12:39 pm

    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! :-)

Top

Sorry, the comment form is now closed.