There's a common practice in Web design of hiding certain pieces of information on the page that are useful in a non-visual context (for instance in screen readers used by blind users), but is somewhat redundant in a visual context (i.e. having a heading saying main navigation above a nav bar).
The standard(ish) technique for hiding these items is to position such items off-screen using CSS styles like this:
.hideMe{
position: absolute;
left: -9000px;
top -9000px;
}
This the places the element way off screen and out of the main flow of the layout (because it's absolutely positioned).
Today I've been trying to do this to a legend tag, but have had difficulty getting it to work in Firefox (and usually it's such a well behaved browser...)
The problem seems to be that Firefox writes some very strict style rules for the legend tag in it's inbuilt styles, using many !important declarations. In theory you should still be able to override !important default browser styles with an !important declaration of your own, i.e.:
.hideMe{
position: absolute !important;
left: -9000px !important;
top -9000px !important;
}
In practice however, this doesn't seem to work.
Apparently this is down to a special treatment that Firefox gives the legend tag. Bug or feature? You decide...
So what's the work around?
One solution is to use the display: none style, but since many screenreaders correctly interpret the rule, that seems a bit pointless, as you're hiding it from the people you wanted to provide it for; may as well not have the tag at all...
The work around I've come up with relies on the fact that the 'special treatment' of the legend tag doesn't extend to margins:
.hideMe
{
/* hide the element off screen (nb: this won't work for legends in firefox) */
position: absolute !important;
left: -999px !important;
top: -990px !important;
/* hide off-screen using margin (works in firefox for legend tags)*/
height: 0px;
padding:0px;
margin-left: -90000px;
margin-top: -900000px;
}
It seems to work, though I haven't tested it extensively, so may present problems in some contexts...
It's not an ideal solution, I'd prefer to affect a genuine ovveride to the default styles. It looks like there's no way of genuinely overriding the position style on the legend tag in Firefox, but if anyone know different please let me know...
Add new comment