I've got a beautiful/minimalistic form layout here (<!-- m --><a class="postlink" href="http://host191.ipowerweb.com/~minglewi/beta/login.php">http://host191.ipowerweb.com/~minglewi/beta/login.php</a><!-- m -->) that works perfectly in firefox, but I have no clue what the deuce is going on in IE. (I realize that the rounded corners shouldn't work in IE (hence the hack), but the floats are pretty simple, i'm not sure where IE is messing this one up...See how this works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
html,
body {
font-family: Georgia,sans-serif;
font-size:95%;
}
form {
width: 330px;
text-align: center;
margin: 0 auto;
line-height: 2em;
}
html > body fieldset{
-moz-border-radius: 0.5em;
}
html > body input {
-moz-border-radius: 0.5em;
padding: 0 0.5em;
}
html > body form div {
margin-bottom: 0;
}
form fieldset {
border: 1px solid #e6e6e6;
padding: 5px;
}
legend {
border: 1px solid #e6e6e6;
line-height: 1.25em;
}
input {
background: #f4f4f4;
border: 1px solid #e6e6e6;
}
input:focus,
input:active {
background-color: #fff;
}
form br {
display: none;
}
form div {
margin-bottom: 0.5em;
}
form div label {
display: block;
width: 90px;
text-align: left;
float: left;
}
form div input {
width: 200px;
}
/*]]>*/
</style>
</head>
<body>
<form action="login.php" method="post">
<fieldset>
<legend>Please Log In</legend>
<div><label for="fLogin">User Name:</label><br />
<input type="text" name="login" id="fLogin" /></div>
<div><label for="fPass">Password:</label><br />
<input type="password" name="pass" id="fPass" /></div>
<input type="submit" value="Log In" />
</fieldset>
</form>
</body>
</html>
I restructured the HTML, and added a few more styles into the mix. I've only got Firebird and IE 6.0 on this computer, so I'm not sure how it looks on anything else. Unfortunately, I don't know what was going on with the original; from the looks of it and the styles, there might've been some conflicting widths or something, but I couldn't really say.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
html,
body {
font-family: Georgia,sans-serif;
font-size:95%;
}
form {
width: 330px;
text-align: center;
margin: 0 auto;
line-height: 2em;
}
html > body fieldset{
-moz-border-radius: 0.5em;
}
html > body input {
-moz-border-radius: 0.5em;
padding: 0 0.5em;
}
html > body form div {
margin-bottom: 0;
}
form fieldset {
border: 1px solid #e6e6e6;
padding: 5px;
}
legend {
border: 1px solid #e6e6e6;
line-height: 1.25em;
}
input {
background: #f4f4f4;
border: 1px solid #e6e6e6;
}
input:focus,
input:active {
background-color: #fff;
}
form br {
display: none;
}
form div {
margin-bottom: 0.5em;
}
form div label {
display: block;
width: 90px;
text-align: left;
float: left;
}
form div input {
width: 200px;
}
/*]]>*/
</style>
</head>
<body>
<form action="login.php" method="post">
<fieldset>
<legend>Please Log In</legend>
<div><label for="fLogin">User Name:</label><br />
<input type="text" name="login" id="fLogin" /></div>
<div><label for="fPass">Password:</label><br />
<input type="password" name="pass" id="fPass" /></div>
<input type="submit" value="Log In" />
</fieldset>
</form>
</body>
</html>
I restructured the HTML, and added a few more styles into the mix. I've only got Firebird and IE 6.0 on this computer, so I'm not sure how it looks on anything else. Unfortunately, I don't know what was going on with the original; from the looks of it and the styles, there might've been some conflicting widths or something, but I couldn't really say.