IE displaying text in a column

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

jtn3833

Thread Starter
Joined
Dec 29, 2000
Messages
453
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;
filter:progid:DXImageTransform.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
 
Joined
Aug 12, 2007
Messages
696
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" />
 
Joined
Aug 12, 2007
Messages
696
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">
 

DrP

Joined
Jul 23, 2005
Messages
739
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?
 

rotarysteve

Banned
Joined
Dec 26, 2010
Messages
496
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
 

jtn3833

Thread Starter
Joined
Dec 29, 2000
Messages
453
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
 
Joined
Aug 12, 2007
Messages
696
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.
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...
 

DrP

Joined
Jul 23, 2005
Messages
739
Just checked your site and form seems okay on iPad. Is it okay in IE8, yet?
 

jtn3833

Thread Starter
Joined
Dec 29, 2000
Messages
453
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
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Members online

Top