My web-app framework renders form errors for each field in an unordered list <UL>
immediately following the invalid field. My problem is that I haven't been able to style things so that the error(s) are listed on the same line with the form field. A line break is instead rendered before the <UL>
.
This is the html that I'm trying to style, showing a server-determined invalid field:
<p>
<label for="id_email">Email</label>
<input id="id_email" type="text" name="email" />
<span class='field_required'> *</span>
<ul class="errorlist"><li>This field is required.</li></ul>
</p>
How can I prevent a line-break between the 'field_required' span
displaying an asterisk for each required field and the 'errorlist' that is rendered if the form doesn't validate (on the server)?
Currently I am styling:
span.field_required {color:red; display:inline;}
ul.errorlist {list-style-type: none; display:inline;}
ul.errorlist li {display: inline; color:red; }
UPDATE: Thanks for everyone's help to date!
I have control of the HTML out, although my framework (django) defaults to giving errors as a <UL>
. As per the great suggestions I have tried wrapping the list in it's own styled <p>
and <span>
. Wrapping the list in a <span>
now works in Firefox 3.0, but not in Safari 4.0.
When I inspect the element in Safari it seems that the paragraph is being closed immediately before the <UL>
, even though this is not how the HTML source looks.
Have I stumbled on a cross-browser bug? (Nope. See below!)
FINAL SOLUTION: Thanks for all the help. Here is how I finally fixed the problem:
<p>
tags around the label-field-error combo with a <div>
styled with clear:both;
. Thanks to jennyfofenny for pointing out that the W3C spec prohibits a block (in my case the list) inside a <p>
- and thus wins the answer tick. This is why Safari was automagically closing my paragraph before the list, although Firefox let it slide.I then style my list thus:
ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;}
ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;}
What about setting the p tag to display: inline as well? Is that an option?
p { display: inline; }
As for the p tag issue... I don't believe the W3C specifications allow an unordered list tag within a paragraph tag. From http://www.w3.org/TR/html401/struct/text.html#h-9.3.1:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).