Sponsor: The CSS Anthology
The CSS Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Blog Entry
Styling <legend> Tags
Published on the 22nd of December 2006
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:
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.
Sponsor: Songbird Media Player
Desktop web player, a digital jukebox, and web browser mash-up. (external link)
