September 09, 2004

A CSS Problem

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 (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;
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?

Posted by heather at 09:56 AM | Comments (0)

September 06, 2004


Saw this cute little guy on our trip to 'Nighttime Zoo' at the San Diego Zoo last night. Isn't he cute?

Posted by heather at 12:41 PM | Comments (0)