i've been staring at this for too long, trying too many things, all with no joy, must tap-out and ask for assistance.

i'm trying to create a template DIV for an error message on a form. the error DIV will appear at top of page. i wish to style it such that the field-name of the field in-error displays at left, with the text of its error message displaying to the right of the field-name.

this is easily accomplished with UL, LI displayed inline. however, i need the text of the error message to wrap within its LI. and i need the LI for the field-name to NOT wrap.

in other words, the error message wraps within its LI independently of the width of the LI to its left, the field-name.

not sure how else to explain it:




here is my CSS:

#error {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
}
#error ul {
    margin: 10px;
}
#error ul li {
    list-style-type: none;
    display: inline;
    float: left;
}

.error_field {
    width:auto;
    font-weight: bold;
}

.error_msg {
    font-weight: normal;
}

here is my HTML:

<div id="error">
    <ul>
        <li><span class="error_field">Password:</span></li>
        <li><span class="error_msg">This is the text of the error message for Password.  When it reaches the right margin, it will wrap.  However, it will wrap within its own LI, not under the LI to its left</span></li>
    </ul>
</div>
<div id="error">
    <ul>
        <li><span class="error_field">Confirm Password:</span></li>
        <li><span class="error_msg">This is the text of the error message for Confirm Password.  Just like the LI for Password, it wraps independently, within its own LI.  Since the text of “Confirm Password” is longer, and does not itself wrap, it pushes its adjacent LI out accordingly.</span></li>
    </ul>
</div>

This should get you on the right track.

CSS:

#error {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
	border: 1px solid red;
	width: 400px;
}
#error ul {
   list-style:none;
   margin: 10px;
   padding: 0;
}
#error ul li {
	margin: 1em 0;
}

.error_field {
    width: auto;
	float: left;
    font-weight: bold;
	background-color: yellow;
}

.error_msg {
    font-weight: normal;
	float: right;
	background-color: orange;
}

.clr { clear: both; }

HTML:

<div id="error">
   <ul>
      <li>
           <div class="error_field"><p>Password Error:</p></div>
           <div class="error_msg"><p>This is where you would put the error message.</p></div>
		   <div class="clr"></div>
      </li>
      <li>
           <div class="error_field"><p>Password Error Big Error:</p></div>
           <div class="error_msg"><p>This is where you would put the error message.</p></div>
		   <div class="clr"></div>
      </li>
      <li>
           <div class="error_field"><p>Password Error Really Big Error:</p></div>
           <div class="error_msg"><p>This is where you would put the error message.</p></div>
		   <div class="clr"></div>
      </li>
      <li>
           <div class="error_field"><p>Password Error Really Really Big Error:</p></div>
           <div class="error_msg"><p>This is where you would put the error message.</p></div>
      </li>
   </ul>
</div>

thanks for your time zincoxide.

while i clearly didnt mention as much in the original post, i wanted to avoid DIVs, and achieve this using the sparse few lines of code that UL/LI often affords for laying out horizonal content.

but, i made your suggestions and they did advance me a bit further. i changed the .error_message to float:left so that the sentence begins right after .error_field.

however, its still not right. that is, it works fine in one browser but not the other (never heard that before) Except this time its IE thats getting it right, and FF thats munching it.

By getting right, i mean IE is creating wrapping contents of .error_message within its own LI, offset to the right of the .error_field. FF however, is wrapping the contents of .error_message, but displaying that LI under the .error_field LI, not inline, or to the right of .error_field.

i'll keep plugging away. new day, right? maybe abandon this as UL/LI and just go with straight floated DIVs.

thanks again.
seannarae

Except this time its IE thats getting it right, and FF thats munching it.

Aah.. no, IE is doing it WRONG and FF is showing you the standards-compliant way

Semantically, what your trying to do is NOT a list.

You could achieve this with straight <p></p> tags. Set the form field name in one <p>, set it to display:block, give it a fixed width and float it. Put your error text in another <p>, it should sit next to the floated inline <p>, and text will wrap around the floated one.

@LadynRed:

Totally agree with the symantics you provide. My goal was to co-opt UL/LI for my error message display; to use less characters/lines of code; much the way UL/LI does for horizontal menu/navigation/tabs.

Additionally, I agree about which browser is sh*tting the bed. I've been bitten on the arse so many times by such inconsistencies, i'm beginning to think i ought to get 'quirksmode' or 'doctype' tattooed on my forearm lest i forget... again. But i've swallowed the red pill of CSS this month, and there's no turning back. Must. Develop. Good. Habits.

yet i'm still at a loss to acheive the desired layout using your suggestion.

Firstly, (and i think this is the key to my issue) i dont wish to have a fixed width for .error_field. Doing so will cause all .error_message paragraphs to share the same left margin. I'd like .error_field width to be fluid, causing .error_message content to wrap in a block starting at the right edge of .error_field.

Hate to admit it, but i think i've been visualising things in table layout for so long its hard for me to let go. Instead i'm spending inordinate amount of time trying to port layout concepts in CSS.

crude as it now seems to me, this is the foundation for how i would lay it all out using tables. Its the CSS equiv thats eluding me. That, and my feeble ability to explain it any better using words.

But regardless, THANKS for your time...
seannarae

THE CSS:

<style type="text/css">
#error {
    width: 500px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
}
#error_field {
    font-weight: bold;
    vertical-align:top;
}
#error_msg {
    font-weight: normal;
}
</style>

THE HTML:

<div id="error">
<table>
    <tr>
        <td id="error_field">errorfield</td>
        <td id="error_msg">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</td>
    </tr>
</table>
<table>
    <tr>
        <td id="error_field">longererrorfield</td>
        <td id="error_msg">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</td>
    </tr>
</table>
<table>
    <tr>
        <td id="error_field">evenlongererrorfield</td>
        <td id="error_msg">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</td>
    </tr>
</table>
</div>

Doing so will cause all .error_message paragraphs to share the same left margin.

No it won't. If you float the error field left, with a width. If you float an element it MUST have a defined width. Give IT some right padding, then the un-floated paragraph that comes after it will sit next to it and wrap. How wide is your widest field name ?

You do have to get away from the table cell mindset. Divs don't behave like tables and to make the jump to CSS you have to accept that as part of the deal.

Oh, and forget the vertical-align thing, it doesn't work on divs they way it does with tables.

LadynRed: I think his Sean's problem is that he doesn't want the error message to wrap at all. He wants the left cell to extend to the full length of the error message, and then the right cell would have a dynamic width as well taking up whats left of the UL box.

Sean: I'm not a pro hear, LadynRed is much more experienced than I -- She bails me out a LOT!!! But... I don't think it is possible to get the exact effect that you want. I did try playing around with it for a little bit with only the LI tags, but it just wasn't working. That is why I tried it with the DIV's. It is still a lot less code (and easier to read) than tables.

@zincoxide:
Nice to see a different interpretation, almost summing it up.
it brings to mind the analogy of a mini-version of a traditional 2-column fluid layout, where:
...my .error_field is a container/div float:left
...my .error_message is an adjacent content div also float:left, the width of which grows, shrinks & wraps content based on users browser.
EXCEPT: such layouts, as LadynRed points out, require a width be specified.

@LadynRed:
I'm coding HTML prototypes ahead of Requirements wherein i could get my hands on a list of field names. I'm simply working on a template div into which any error message will display.

Realising now i should just capitulate & meet myself half-way: specify a width for the left-side .error_field div and just accept the wrapping of its contents. i had wanted .error_field to dynamically extend width of left-side however wide.