Question

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:

• Replaced the <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;}

Answer 1

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).