BetterPHP

Okay, so I made this really nice looking login page (well, I think it looks nice) and it was perfect, it worked, and it was secure.
Now, because I'm on Mac OS X Lion, I don't have IE (THANK GOD).



I got my friend to have a look at it. And of course he uses IE, and he says it looks sh*t.
I ask why:



Thats why :/

I tried that reset.css thing, but it made it worse. Though it could have been because I included it after I included the main styles.
Below is the 2 main CSS scripts that make this:

main.css

@charset "UTF-8";
/* CSS Document */

html { margin: 0; padding: 0; }

body {
	background-image: url('../img/bg.png');
	background-color: #666;
	font-family: Arial, Helvetica, sans-serif;
}
#conainer_login {
	position: inherit;
	padding-top: 10%;
	padding-left: 40%;
	padding-right: 40%;
}
#head {
	background-image: url('../img/head.png');
	position: absolute;
	height: 148px;
	width: 307px;
}
#main_login {
	background-color: #FFF;
	width: 306.97px;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	box-shadow: 0px 0px 6px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000');
}
#conainer_dash {
	position: inherit;
	padding-top: 4%;
	padding-left: 12%;
	padding-right: 12%;
}
#dash {
	background-color: #FFF;
	width: 100%;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	box-shadow: 0px 0px 6px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000');
}
#dash_padding {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2%;
	padding-right: 2%;
}
#clear_head {
	padding-bottom: 124px;
}
#clear_small {
	padding-bottom: 3px;
}
#clear_med {
	padding-bottom: 12px;
}

paragraph.css

@charset "UTF-8";
/* CSS Document */

h3.dash_title {
	padding-top: 10px;
	font-family: Abel;
	text-align: center;
}
h1.welcome-dash {
	margin: 0;
	font-weight: normal;
	font-size: x-large;
	font-family: Abel;
	text-align: left;
}
p.notice-lockedout {
	font-size: medium;
	text-align: center;
	font-family: Abel;
	padding-top: 45px;
	padding-bottom: 90px;
	color: #000;
}
p.welcome-dash {
	font-family: Abel;
	text-align: justify;
	padding-bottom: 6px;
}
p.login {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	font-size: x-large;
	text-align: center;
	font-family: Abel;
	color: #000;
}
p.notice-mesg {
	padding-top: 2px;
	padding-bottom: 2px;
	width: 100%;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9101C1), color-stop(1, #7900A1) );
	background:-moz-linear-gradient( center top, #9101C1 5%, #7900A1 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9101C1', endColorstr='#7900A1');
	font-size: small;
	text-shadow: 0px 0px 2px #000;
	text-align: center;
	font-family: Abel;
	color: #000;
}
p.copyright {
	text-align: center;
	font-size: x-small;
	font-family: Abel;
	color: #FFF;
}

index.php (Well, the problem part)

<div id="conainer_login">
  <div id="head"></div><div id="clear_head"></div><div id="main_login">
    <p class="login">Login</p>
    <form method="post" action="?do=auth">
      <label for="email">E-Mail</label>
      <input class="email" type="text" name="usr_login" />
      <label for="password">Password</label>
      <input class="password" type="password" name="usr_password" />
      <div id="clear_med"></div>
      <div class="align-center">
        <input name="submit_login" type="submit" class="submit_login" value=">>" />
      </div>
    </form>
	<?php if($_GET["do"] == "show_login"){ ?><p class="notice-mesg" style="color: #e1e1e1;">Logged out, bye!</p><div id="clear_small"></div><?php }else{ ?> <div id="clear_med"></div><?php } ?>
  </div>
  <p class="copyright">© Copyright <?php echo date("Y"); ?> · All Rights Reserved</p>
</div>

And if you're interested, the entire login, dashboard, and everything else is all on one page using $_GET (with sessions, don't worry I'm not that stupid)

So basically, how could I fix this problem?

abcedea wrote:I tried that reset.css thing, but it made it worse. Though it could have been because I included it after I included the main styles.

It probably was, but that's the fail way to fix it anyway.

When dealing with IE I usually do these things

• Make sure your HTML is valid according to http://validator.w3.org/ This gets IE out of quirks mode and make it not behave like IE6
• Work out which element is causing the problem, from the screenshot it looks like the main login box is too tall, and explore alternative ways of doing the same thing. If it is that the box is too tall is could be an issue with the padding since IE has always been a bit weird with padding, sometimes including it in the height and sometimes not. So I would try adding an inner element that has a margin instead.

9 times out of 10 valid xhtml will fix it though