IE6 Float Problem

[swlego]

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.

Name

Email

Message

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!

[ThinkSoJoE]

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

[swlego]

Thanks for checking it out and I appreciate the compliment!

[swlego]

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!

[Author]

Posts