[Catalyst] Styling HTML::Widget elements

[Tobias]

I'm checking out (Catalyst::Plugin::)HTML::Widget at the moment and have come
across a problem styling the label tag. The HTML generated by HTML::Widget
looks like this:

<label for="login_user" id="login_user_label">
Username:<input class="textfield" id="login_user" name="user" size="25"
type="text" />
</label>

Now styling the <label> tag and setting a fixed width for it to get all input
elements vertically aligned does not work, because the <label> tag is wrapped
around the <input> tag and thus the specified width is for both, the <label>
AND the <input> tag. Because the <label> tag already has a "for" attribute it
is not neccessary to put it around the associated <input> element. What do you
think?

The following would be much easier to style IMHO:

<label for="login_user" id="login_user_label">Username:</label>
<input class="textfield" id="login_user" name="user" size="25" type="text" />

I'd be glad to hear that someone has already found a CSS solution to this or
if HTML::Widget should be patched to have the <label> tag before and not around
the input element tags (actually that's also what the W3C does in the examples:
http://www.w3.org/TR/WD-html40-970708/interact/forms.html#edef-LABEL)

Sorry if this is not directly Catalyst related.

Thanx!

Toby