Problem hidden table caption in IE6
newbie
Posted: Fri, 2008-11-21 10:10
Hi.
I'm trying to hide the table caption with the offleft method:
table caption {
position:absolute;
left:-9999px;
overflow:hidden;
}
it works correct in most browsers but no in IE6, where caption is always displayed.
I try to define width and height but it isn't work.
I know that i can hide the caption with display:none or visibility:hidden, but due accessibility matters i can't do it.
Did anyone know how i can solve this problem?
Thanks!
Elder
Posts: 1005
Joined: 2008-02-04
Location: Netherlands
I dunno if IE6 has a bug
Posted: Fri, 2008-11-21 12:54
I dunno if IE6 has a bug with this, but I wouldn't be surprised.
However, what you COULD do is have no caption, but use the caption text in the summary. Every table should have a summary, while they do not all have to have a caption. I think of the caption as being for the seeing people and summary for everyone else. Although one problem is for text-browsers and people with just CSS turned off or no CSS support... for some reason summaries won't appear for them.
Another thing you could maybe do is have the caption on the side or bottom (I forget who supports what here) and coloured the same as the background colour. This ensures that even text browsers get the caption (or regular browsers with css off).
Not sure what the overflow: hidden is for, but setting the caption to position: absolute (without the left: declaration) should allow you to set a height and width on it-- because you've made it a block. If you can't set height or width, IE6 isn't even getting the position: absolute at all then for some reason.
Now when FF gives me this crap with legends, I do it two-fold:
legend {
position: absolute;
left: -9999em;
margin-left: -9999em;
margin-top: -9999em;
}
The margins are there only for FF which has issues positioning legends, cause it's a tard. IE6 may have this same issue, where maybe you have to use margins to move the thing offscreen. Setting things off the top is actually sometimes a problem for Window-Eyes, but when you're forced to use it, you're forced to use it.
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 2
Joined: 2008-11-21
Thanks for the answer Stomme
Posted: Fri, 2008-11-21 13:55
Thanks for the answer Stomme poes.
I solve the problem with a litle extra markup in the table caption. Adding a SPAN element inside the caption and applying it the hidden style works perfectly in all IE, FF, Opera, etc.
The markup:
<table>
<caption><span>Table caption</span></caption>
... table content ...
</table>
table caption span {
position:absolute;
left:-9999px;
}