Breadcrumbs

Styling <legend> Tags

Recently, when coding Lowter's new layout, I ran into an issue trying to use absolute positioning on a <legend> tag. I was attempting to apply these particular styles to it:

Code: CSS

legend {
    left: -2000px;
    position: absolute;
    width: 990px;
}

I wanted to hide the <legend> tag from visitors on a certain form. Using display: none would not have sufficed because then screen-readers would have ignored the form instructions I wanted them to read aloud. The stylings worked fine in Opera, Safari, and Internet Explorer. The browser causing the problem was actually Firefox, which was rather odd considering Firefox typically provides acceptable CSS support.

Browsing around Google, I came across a page that addressed the problem (external link). In a nut shell, Firefox does not offer any positioning abilities on <legend> tags, so make sure to keep that in mind when doing any design work.