14

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;}
2
  • No, you haven't stumbled on a browser bug. You've stumbled on a bug in your HTML. p tags (and span s too) can only take inline elements (as jennyfofenny rightly pointed out in her answer: stackoverflow.com/questions/1682873/…). ul is a block-level element.
    – mercator
    Nov 6, 2009 at 0:20
  • Thanks mercator, you're quite correct. (Technically there is a browser bug, but it's with Firefox allowing me to get away with the invalid html!)
    – djoll
    Nov 6, 2009 at 1:16

5 Answers 5

13

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

0
2

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.

1
ul.errorlist { display: inline; margin: 0; }
4
  • Why does this keep getting upvoted? If you bother testing it, you'll discover that it doesn't actually solve the OP's problem. Additionally, it's bad practice to exclude the units from the margin property.
    – Asaph
    Nov 5, 2009 at 20:37
  • @John: margin: 0px if you want it to validate.
    – Asaph
    Nov 5, 2009 at 22:26
  • 8
    Zero doesn't need a unit. margin takes <length> values, and the spec says: "After a zero length, the unit identifier is optional.": w3.org/TR/CSS2/syndata.html#value-def-length
    – mercator
    Nov 6, 2009 at 0:08
  • @mercator: Unit optional after zero. I didn't know that. You learn something new everyday on stackoverflow :)
    – Asaph
    Nov 6, 2009 at 0:28
1

Just one last bit:

ul.errorlist {
  display: inline;
  list-style-type: none; 
}
1
  • Sorry, no cigar. 'display:inline' in the <UL> doesn't prevent the line-break.
    – djoll
    Nov 5, 2009 at 19:20
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.