Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  • 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;}
like image 253
djoll Avatar asked Nov 05 '09 19:11

djoll


People also ask

How do you stop a line from breaking?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

How do you stop a line break in HTML?

<nobr>: The Non-Breaking Text element Be aware that this feature may cease to work at any time. The <nobr> HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.

How do you prevent a line from breaking in CSS?

You can prevent line breaks and text wrapping for specific elements using the CSS white-space property.

How do you make an unordered list without dots?

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.


2 Answers

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

like image 105
jennyfofenny Avatar answered Oct 18 '22 20:10

jennyfofenny


ul.errorlist { display: inline; margin: 0; }
like image 44
Daniel A. White Avatar answered Oct 18 '22 21:10

Daniel A. White