Wed, 2005-02-23 15:12
Hi, I'm trying to build a form where the legend is *inside* the fieldset, rather than overlapping the border. I need each fieldset to appear with a full-length top border, but when I try to use CSS to move the legend, it leaves a space in the border behind where the legend used to be.
All of the following I've checked in firefox. I haven't even begun to worry about the other browsers yet. (ugh)
Attempt 1:
fieldset { margin:0; padding: 0; border-style: none; border-top: 1px solid #999; position: relative; } legend { position: absolute; top: 3em; font-weight: bold; color: #999; }
That didn't work, so I tried to trick the CSS by removing the fieldset border, and having the legend emulate the border itself:
fieldset { margin:0; padding: 0; border-style: none; } legend { display: block; width: 464px !important; /* this should be 100% of the form width, if I had my druthers */ border-top: 8px solid #999; padding-top: .5em; font-weight: bold; color: #999; }
But I can't seem to get the width of the legend to change. Is this a browser implementation oversight, or were there different rules for CSS for forms that I missed?