#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6

    Exclamation Error Message Text Not Wrapping within Parent Div


    Hello everyone,

    This is a question about wrapping text within a fixed width.

    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.

    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:
    Code:
          <div id="submissionform"> <!-- begin 2nd form markup -->
            <form name="form2" method="post" action="Scripts/confirmform.php">
              <div>
                <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" />
              </div>
              <div>
                <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" />
              </div>
              <div>
                <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>18-35</option>
                  <option>36-55</option>
                  <option>55+</option>
                  <option>17 or younger</option>
                </select>
              </div>
              <div>
              	 <label for="gender" class="fixedwidth">Select your gender:</label>
                 <select name="gender" class="inputwidth" id="gender">
                   <option selected="selected">Select Gender</option>
                   <option>Male</option>
                   <option>Female</option>
                 </select>
              </div>
              <div>
                <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>Canada</option>
                  <option>Australia</option>
                  <option>Russia</option>
                  <option>Brazil</option>
                  <option>Africa</option>
                  <option>Somewhere else</option>
                </select>
              </div>
                <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">
              		<p>aweoigjaoigjoaipwejpgawiojgpoiajgioawhppoarghoapwergiowerjhiopawhgwfgwiopioapwj</p>
                </div>
                  <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"/>      
            </form>
          </div>
        </div>
    Here are the styles related to the form:
    Code:
    #submissionform{
    	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    	width:330px;
    	height:320px;
    	position:absolute;
    	display:none;
    	top:260px;
    	left:130px;
    	z-index:1;
    	padding:60px 10px 0 20px;
    	text-align:left;
    }
    #submissionform div{padding-bottom:3px;}
    
    .fixedwidth{
    	width:150px;
    	float:left;
    }
    .inputwidth{width:170px;}
    .required{color:red;}
    
    .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.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Normally the browser only wraps text at spaces. Your example text has no spaces, so it doesn't wrap and therefore overflows the edge of its parent element(s). Many professional designers and developers use "Lorem Ipsum" as filler text.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    Yes, spaces do work quite nicely. That's all I really needed in order to get it positioned correctly.

IMN logo majestic logo threadwatch logo seochat tools logo