CODEWITHSUNDEEP
htmlcsshtml-lists
djoll
djoll

Reputation: 1229

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

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:

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

Upvotes: 14

Views: 47562

Answers (5)

jennyfofenny
jennyfofenny

Reputation: 4365

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

Upvotes: 14

James Black
James Black

Reputation: 41858

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.

Upvotes: 0

user172134
user172134

Reputation:

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.

Upvotes: 2

No Surprises
No Surprises

Reputation: 4901

Just one last bit:

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

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190905

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

Upvotes: 1

Related Questions