Styling HTML forms surely isn’t the most popular task amongst webdesigners. Many obstacles need to be taken, to allow your CSS to format your forms perfectly. One of this obstacles is the weird rendering-behavior of HTML form-element <legend>.
From time to time you want to display your <legend>s just like headings or other block-elements. Optimisticly you start to assign display:block, reload for example your Gecko-Engine based browser and what happens? Behavior of <legend> is not like expected — it displays inline, just as before.
But what now, what to do if even modern browsers ignores such a basic CSS-rule? The solution is simple, however not very clean and will work with all major browsers:
- Insert a
<span>inside the<legend>you want to style - Via CSS, assign a certain width (like 100% to your
<legend> - Assign display:block to the
<span>inside the<legend> - Finally float your
<legend>in dispute to the left (you can remove the diplay-property too) and you’re done.
Note: IE 6 and 7 will still indent <legend>s by seven pixels. This can be fixed in context with your usual IE-Hacks by adding a negative left margin of the mentioned 7 pixels