IE displaying text in a column

This webpage displays fine in FF & chrome, but in IE each word of text is on the next line, and the div box doesn't extend down below it. I'm new to forms, is there extra code needed for IE or something else I'm missing?

http://www.thenserenity.com/form.html

i have 2 css files, 1 basic (for all browsers) and 1 for IE:

--------------------------------------------------------
basic css:

@charset "utf-8";
/* CSS Document */

body {
background-image: url(../images/background_gradiant.jpg);
background-repeat:repeat-x;
background-color:#ccccfe;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
border:0;
}

#header {
width:800px;
height:191px;
margin-top: 25px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/logo-top.png);
}

/*Testimonials*/
#header-bottom1 {
width:800px;
height:83px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/logo-bottom1.png);
}

#header-bottom2 {
width:800px;
height:83px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/logo-bottom2.png);
}

#header-bottom3 {
width:800px;
height:83px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/logo-bottom3.png);
}
/*Testimonials*/

#nav-wrap {
width:820px;
height:100%;
margin-left:auto;
margin-right:auto;

}

.nav {
width: 163px;
height: 120px;
position: absolute;
z-index: 50;
clear: both;
margin-top:74px;

}

#wrapper {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:25px;

}

.photoleft {float: left; padding:0px 10px 0px 2px; margin: 0;

}

br.clear {
clear:both;
}


/*ROUNDED CORNERS*/

.rounded_STYLE
{
background-color: white; /* if needed */
border: 25px solid #FFFFFF; /* if needed */
-webkit-border-radius: 25px; /* for Safari */
-moz-border-radius: 25px; /* for Firefox */
margin: 0 0 25px 0;
}

/*ROUNDED CORNERS*/

p{ margin: 0}

--------------------------------------------------------
IE only CSS:

@charset "utf-8";
/* CSS Document */


div#wrapper {
background:none;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='colhead-tl.png' ,sizingMethod='crop');
}

.nav {

margin-top:49px;

}

.rounded_STYLE
{
background-color: white; /* if needed */
border: 25px solid white; /* if needed */
position: relative;
}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
width: 25px;
height: 25px;
position: absolute;
}

.rounded_STYLE > .tl
{
background: url(../images/colhead-tl.jpg) top left no-repeat;
top: -25px;
left: -25px;
}

.rounded_STYLE > .tr
{
background: url(../images/colhead-tr.jpg) top right no-repeat;
top: -25px;
right: -25px;
}

.rounded_STYLE > .bl
{
background: url(../images/colhead-bl.jpg) bottom left no-repeat;
bottom: -25px;
left: -25px;
}

.rounded_STYLE > .br
{
background: url(../images/colhead-br.jpg) bottom right no-repeat;
bottom: -25px;
right: -25px;
}
--------------------------------------------------------
Any help would be great,
Thanks,
JTN

 

I can't view your page in IE at the moment, but I do see one problem. Not sure what sort of trouble it might cause. Your <label> tags include the <input> tag.

Change the relevant sections to:

Code:

<label for="fullname">Full name at birth</label>
<input name="required-fullname" type="text" id="fullname" size="50" />

 

One other thing, again, not sure what effect it would have in IE, but technically not right:

You specify the document type of xhtml, but have a few tags in your form with uppercase tags:

Code:

<INPUT TYPE="hidden" NAME="success" VALUE="http://www.thenserenity.com/submit-thanks.html">
<INPUT NAME="failure" TYPE="hidden" id="failure" VALUE="http://www.thenserenity.com/submit-error.html">

These should be lowercase for xhtml:

Code:

<input type="hidden" name="success" value="http://www.thenserenity.com/submit-thanks.html">
<input name="failure" type="hidden" id="failure" value="http://www.thenserenity.com/submit-error.html">

 

Not sure, but looks like an element width problem to me. Try playing around with this line:

Code:

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
width: 25px;
height: 25px;
position: absolute;
}

There's nothing wrong with having the input within the label tags. Might not validate, but helps with usability because it means clicking on the label places the cursor the relevant input field. That said, Ehymel is right, the 'proper' way to get the same effect is to do it the way he/she described, but it uses more code. If IE8 doesn't play ball after you've tried the width thing, maybe do what Ehymel says?

 

Could use a non-breaking space, between the words. it's html for a space. it is &nbsp;

just replace the actual space with the code above

 

Hey, thanks for the ideas - i'm getting close.

ehymel - Dreamweaver actually did the things you suggested changing, but i didn't know they were wrong. i corrected them, but it didn't do anything.

DrP - looks like you're on to something. I extended the width and now the text is lining up properly but for some reason the form isn't in the div.

i adjusted the height but it didn't do anything.

very close to this thing being solved, any other ideas?

thanks a lot for your help, i'm not great with css and i'm brand new to forms.
jtn

 

Apparently it's not wrong to do this, and there are some advantages to your original version, as DrP suggested.

Getting the spacing just right in forms can be tricky...

 

Just checked your site and form seems okay on iPad. Is it okay in IE8, yet?

 

It's displaying better, but doesn't seem to be contained in the div, which i can't figure out.

i'm hoping to just sit down tomorrow night and work through it for a few hours.

wish me luck,
jtn