Error Message Text Not Wrapping within Parent Div

Hello everyone,

I know I continue to bombard with questions about this form, but this should be my last question for a while. :confused:

Inside the #submissionform div, there is another div near the bottom with the i.d. of #errormessage, which contains a <p> element that the JavaScript appends a message to if the form submission is found to be invalid. The reason I put a div around this <p> element is to keep the submit buttons below from bouncing up and down when the form is either submitted or form is canceled/reset, and that seemed to prevent the buttons from moving by having a fixed height on the div. I can put the error message below the submit buttons, but I like where it is now.

So, I noticed that the error messages were appearing to just run along and not wrap around inside the #submissionform div, and it also wouldn’t wrap itself within the width of the actual #errormessage div. So, I tried to find out why this was happening by adding a border to the error message div. I tried quite a few different styles, but I found that I’m stumped… again. :rolleyes:

I put in a long string of gibberish just to display what is happening when the text reaches beyond the width at which I desire it to wrap around into a different line.
Here is a screenshot of what I’m describing.

Here is the form markup:

      <div id="submissionform"> <!-- begin 2nd form markup -->
        <form name="form2" method="post" action="Scripts/confirmform.php">
            <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span class="required">*</span></label>
            <input type="text" name="confirmemail" id="confirmemail" value="" maxlength="60" class="inputwidth" />
            <label for="name" class="fixedwidth">Enter your name:<span class="required">*</span></label>
            <input type="text" name="name" id="name" value="" maxlength="60" class="inputwidth" />
            <label for="age" class="fixedwidth">Select your age range:</label>
            <select name="age" id="age" class="inputwidth">
              <option selected="selected">Select an Age Range</option>
              <option>17 or younger</option>
          	 <label for="gender" class="fixedwidth">Select your gender:</label>
             <select name="gender" class="inputwidth" id="gender">
               <option selected="selected">Select Gender</option>
            <label for="country" class="fixedwidth">Select your location:<span class="required">*</span></label>
            <select name="country" id="country" class="inputwidth">
              <option selected="selected">Select Country</option>
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Somewhere else</option>
            <p id="spamtext">To prevent spam, please answer:<span class="required">*</span></p>
          	<label for="addition" id="math"></label>
            <input name="addition" id="addition" value="" maxlength="3" />
            <div id="errormessage">
              <label for="aicatcher" class="aicatcher">Please leave this field blank:</label>
          	  <input type="text" name="aicatcher" class="aicatcher" id="aicatcher" value="" />
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" id="finalsubmit"/>
          <input type="reset" value="Cancel" class="formsubmitbutton" id="cancel"/>

Here are the styles related to the form:

	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
	padding:60px 10px 0 20px;
#submissionform div{padding-bottom:3px;}


.formsubmitbutton{margin-left:50px; margin-top:18px;}

#errormessage{border:double; color:red; height:40px; padding:0 16px 4px 9px; font-weight:bold; font-size:15px;}
#errormessage p{margin:0; padding:0;}
#errormessage a{color:#09C;}
#errormessage a:hover{color:#0CC; text-decoration:none;}

Many thanks as always. I’m almost done with this project.

It’s not realistic to have a long line of text like that with no breaks. That will break your design in any context. Anyhow, you can force text to wrap with

#errormessage p {word-wrap: break-word;}

Yes, spaces do work wonders. No need for the typical “Lorem ipsum” whatever, but it seems to be working a little better with the spaces.