1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

IE displaying text in a column

Discussion in 'Web Design & Development' started by jtn3833, Jan 14, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. jtn3833

    jtn3833 Thread Starter

    Joined:
    Dec 29, 2000
    Messages:
    452
    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
     
  2. ehymel

    ehymel

    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" />
     
  3. ehymel

    ehymel

    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">
    
     
  4. DrP

    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?
     
  5. rotarysteve

    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
     
  6. jtn3833

    jtn3833 Thread Starter

    Joined:
    Dec 29, 2000
    Messages:
    452
    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
     
  7. ehymel

    ehymel

    Joined:
    Aug 12, 2007
    Messages:
    696
    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...
     
  8. DrP

    DrP

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

    jtn3833 Thread Starter

    Joined:
    Dec 29, 2000
    Messages:
    452
    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
     
  10. Sponsor

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 733,556 other people just like you!

Loading...
Similar Threads - displaying text column
  1. charlzguitarz
    Replies:
    4
    Views:
    485
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/974734

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice