How do I prevent a line break occurring before an unordered list?

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;}

Thanks everyone!

Answer 1

ul.errorlist { display: inline; margin: 0; }

Answer 2

Just one last bit:

ul.errorlist {
  display: inline;
  list-style-type: none; 
}

Answer 3

Do you just want to eliminate the space between the paragraph and the list?

If so, use:

ul.errorlist {
    margin-top:0;
}

Then add "margin-bottom:0;" to the paragraph (or just put the errorlist inside the p tags). If you also want the list to display on a single line, use display:inline as the others suggested.

Answer 4

If you can't change the html then your problem is that the ul has no element around it that you can style.

If you use javascript, if you can know when an error happens, then you can add a <p> or <span> around the <ul> and then style that so that it will be inline.

This link shows, about 1/2 way down, using the <p> tag for this purpose.

http://www.alistapart.com/articles/taminglists/

If you are just trying to do this in css I believe you will be out of luck. You may ask if they can put a enclosing tag around the error list so you are able to style it.

Answer 5

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