My lastest project at work has been to create a web form. Nothing too fancy, although the form does have to work in IE 5+, NS 6+ (I'm battling very hard to NOT have to code for 4.7), as well as Firefox .8+ and Opera 7+. I want to avoid tables if at all possible.
After doing a bit of googling on the latest web form trends and standards, I came across http://www.quirksmode.org/css/forms.html (since IE is a poor supporter of css). Seemed simple enough, but didn't work in NS--the label text disappeared. Addionally, my form was complicated because I had some navigation on the left (floated) with the form on the right; the <br> tags screwed up the layout in IE 6--they cleared the first line of the form until the bottom of nav text on the left. I eventually fixed the second problem by floating the form wrapper float:right instead of the wrapper for the nav float:left.
But still my NS problem remained. I then discovered that the NS disappearing <label> text is a known phenomenon, but I wasn't happy with the workaround. My simple
<label for="name">First name<label><input id="name"...>
now became
<label for="name"><span>First name<span></label><input id="name"...>
with the <span> added so that NS would display the label text.
But it didn't work in NS 6.0.
So I then decided to heck with the accepted norm of stying the form and I replaced all of that label code with a simple, styled <h5>. My code now looks like this:
h5 {
font:bold 12px arial, sans-serif;
display: block;
width:145px;
float: left;
margin-top: 0px;
margin-bottom: 20px;
text-align: right;
padding-right: 20px;}
.
.
.
<h5>First name</h5><input name="fname" ...>
My code is valid XHTML 1.0 Strict (valid css, as well) and displays in all tested browsers (haven't tested in IE 5/5.5 yet), so if my code is so 'bad' why does it work so good? And just how 'bad' is it?