Forums

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:

	<h1>Contact</h1>
<p class = 'centered'>
	Please fill out the form below and someone will contact you as soon as possible. Thank you.
</p>
<div id = 'contactForm'>
	<form method = \"post\" action = \"contactEngine.php\" id = \"resChurchContact\">
		
			
		<div id = 'formLeft'>
			
			<label for=\"Name\">Name</label>
			<div class = 'input-bg'>
				<input type = 'text' id = 'Name' name = 'Name' class = 'required' minlength = '2' tabindex = '1'>
			</div>
			
			<label for=\"Email\">Email</label>
			<div class = 'input-bg'>
				<input type = 'text' id = 'Email' name = 'Email' class = 'required email' tabindex = '2'>
			</div>
			
			<div id = 'send-but'>
				<input type = 'image' id = 'Submit' name = 'Submit' src = '<?php echo $imagesDir?>contact/trans.png' tabindex = '4'>
			</div>
		</div>
		
		<div id = 'formRight'>
			<label for=\"Message\">Message</label>
			<div class = 'message-bg'>
				<textarea name = 'Message' id = 'Message' class = 'required' rows = '10' cols = '20' tabindex = '3' minlength = '2' ></textarea>
			</div>
		
		</div>
		
		<div class = 'clear'></div>
		
	</form>

</div>

CSS:

/* @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)
http://www.underthebedstudios.com/Picture1.png

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

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!

chriscoyier

div#formLeft{
float:left;
padding: 0 0 0 5px;
}

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

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.

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!

treehouse : what would you like to learn today?

Forums

IE6 Float Problem