Grow your CSS skills. Land your dream job.

IE6 Float Problem

  • # July 30, 2008 at 4:06 pm

    I can’t quite figure this one out. I modified the contact form in Chris’s Tutorials. The page validates except for some jquery validation hooks and it looks perfect in FF and Safari, nearly perfect in IE7, and completely "borked" in IE6. I KNOW I’m using a trans png for the send button and I’ve got to tweak that for IE6, but my issue is that the "Message" box is not floating right in IE6, and it is instead appearing below the left float.

    url is: http://www.underthebedstudios.com/Resto … ontact.php

    Here’s the relevant code:

    HTML:

    Code:

    Contact

    Please fill out the form below and someone will contact you as soon as possible. Thank you.

    CSS:

    Code:
    /* @override http://localhost:8888/RestorationChurch/public_html/css/contact.css */

    h1{
    padding-top:0px;
    text-align:center;
    font-size:4em;
    }

    fieldset { border: none; }

    form {
    padding:10px;
    }

    label {
    display: block;
    font-size: 1.8em;
    text-indent: 3px;
    color:white;
    }

    label.error {
    position: absolute;
    top: -16px;
    right: 0px;
    padding: 3px;
    color: #ffffe6;
    font-size: 1.1em;
    text-align: right;
    font-weight: bold;
    font-weight: normal;
    }

    div#contactForm{
    background: url(../images/contact/Contact.png) no-repeat;
    width:697px;
    height:296px;
    margin:0px auto;
    }

    div#formLeft{
    float:left;
    padding: 0 0 0 5px;
    }
    #formLeft input {
    width: 250px;
    margin: 0 0 20px 0;
    border: none;
    text-align: center;
    background: none;
    margin: 7px 0 0 5px;
    font-size: 1.8em;
    outline: none;
    }

    #formLeft .input-bg {
    background: url(../images/contact/FormField.png) bottom left no-repeat transparent;
    height: 42px;
    margin-bottom: 10px;
    position: relative;
    }

    #formLeft .active {
    background: url(../images/contact/FormField.png) top left no-repeat transparent;
    }

    #formLeft #send-but {
    background: url(../images/contact/Send-But.png) bottom left no-repeat transparent;
    height:57px;
    width:142px;
    }

    #formLeft #send-but input{
    height:55px;
    width:142px;
    outline:none;
    }

    div#formRight{
    float:right;
    padding: 0 10px 0 0;
    position:relative;
    }
    #formRight textarea {
    width: 390px;
    height: 222px;
    display: block;
    border: none;
    background: none;
    padding: 3px 0 13px 5px;
    font-family: Helvetica, sans-serif;
    font-size: 1.8em;
    outline: none;
    }
    #formRight .message-bg {
    background: url(../images/contact/FormArea.png) bottom left no-repeat transparent;
    height: 243px;
    position: relative;
    }
    #formRight .active {
    background: url(../images/contact/FormArea.png) top left no-repeat transparent;
    }

    div#ContactFormSent{
    font-size: 3.0em;
    text-align: center;
    padding-top: 80px;
    color: white;
    }

    Can anybody catch anything I’m missing? Here are the screenshots:
    Firefox (Correct)
    [img]http://www.underthebedstudios.com/Picture1.png[/img]

    IE6 (Borked)
    [img]http://www.underthebedstudios.com/Picture2.png[/img]

    Many thanks in advance!

    # July 30, 2008 at 4:13 pm

    I’m stumped, but I thought I’d take a second to say that the site design looks pretty awesome!

    # July 30, 2008 at 4:14 pm

    Thanks for checking it out and I appreciate the compliment!

    # July 31, 2008 at 11:01 am

    [url]div#formLeft{
    float:left;
    padding: 0 0 0 5px;
    }[/url]

    When you float a DIV like that, you should always apply a WIDTH. Try adding widths for both the sides and see if that helps. Different browsers will calculate that box differently if this is missing.

    box
    # July 31, 2008 at 7:43 pm

    As Chris mentioned, this symptom in IE6 is invariably a width issue. IE6 Can’t add up! Remember that.

    Try knocking a couple of pixels off the floated width – but do so as a conditional comment otherwise you’ll affect the good browsers the render sites properly.

    # August 1, 2008 at 11:34 pm

    Thanks for the help guys. I will be trying that tonight. I’d love to follow Apple’s MobileMe stance and disregard IE6 completely, but alas, I must please the client. BTW, script & style made it into my bookmarks bar immediately, great idea, already getting some great stuff there. Keep up the good work!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".