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?
