[LOI Kratong]

Hello people.

I have a form which has basic styling with css. It is jquerified to slide in out and out when clicked. In IE when the form slides open one of the input boxes 'pops out' of the top of the form.

Markup:

<form id="onlineresources" name="ASPPLoginForm" method="post" action="http://www.meiresources.org/tutors/aspplogin.aspx?ReturnUrl=%2fteach%2fhome.aspx">
	<label for="Username">Username</label>
	<input type="text" name="Username" id="Username">
	<label for="Password">Password</label>
	<input type="password" name="Password" id="Password">
	<p><a href="index.php?section=resources&section=onlineresources">Don't have access?</a></p>
	<input type="submit" name="Login" value="Login" id="Login" />
</form>

CSS:

form#onlineresources {
	border: 1px solid #682F54;
	margin-top: 0;
	padding: 5px;
}

form#onlineresources p {
	clear: both;
	margin: 0;
	padding: 0;
	padding-top: 10px;
}

form#onlineresources label {
	clear: both;
	display: block;
	float: left;
	width: 85px;	
}

form#onlineresources input {
	display: block;
	float: left;
	width: 160px;	
}

form#onlineresources input#Login {
	float: right;
	margin-top: -20px;
	width: 80px;	
}

form#onlineresources:after { content: ""; display: block; height: 0; clear: both; }

For an example please see MEI - Mathematics in Education and Industry.

Does anyone have any idea how I can stop this happening?

[herkalees]

Well, you're using a "clear fix" that isn't supported by IE (The last bit of the CSS, above).

See if setting overflow:auto; on the form#onlineresources is enough:

form#onlineresources {
	border: 1px solid #682F54;
	margin-top: 0;
	padding: 5px;
	overflow: auto;
}

If not, you'll need to add a non-semantic element right before the closing </form> tag, like <span style="display:block; clear:both;"></span>

[LOI Kratong]

Thanks herkalees, that seems to have done the trick. I'm going now investigate what that actually does!