My webpage looks good in firefox but not it. Can you help? Basically everything is centered higher in ie. And in ie my bottons are not aligned with my text boxes. Heres the html :

<!doctype HTML>

<HTML>

<HEAD>
<TITLE> </TITLE>
<LINK REL=STYLESHEET HREF="LOGINSCREEN1.CSS" TYPE="TEXT/CSS">

</HEAD>

<BODY>

<DIV CLASS = "DIV1">

<TABLE>

<tbody>
<tr>
<td text-align : center>
Email Address
</td>
</tr>
<tr>
<td>
<input type = "text"; size = "59"; NAME = "EMAILADDRESS"/>
</td>
</tr>

<tr>
<td text-align : center>
Password
</td>
</tr>
<tr>
<td>
<input type="text"; size = "59"; NAME = "PASSWORD"/>
</td>
</tr>

</tbody>

</table>

</DIV>

<FORM METHOD="LINK">
<INPUT value = "Login" type = "submit" class = "button1">
</FORM>

<FORM METHOD="LINK" ACTION="LOGINSCREEN2.HTML">
<INPUT value = "Create an account" type = "submit" class = "button2">
</FORM>

</BODY>
</HTML>

And heres the css :BODY {
HEIGHT : 100%;
WEIGHT : 100%;
BACKGROUND-COLOR : #480000;

}

H1 {
FONT-FAMILY : CENTURY GOTHIC;
TEXT-ALIGN : CENTER;
FONT-SIZE : 1000%;
COLOR : #A80000;
FONT-WEIGHT : 100;
}

.button1 {
BACKGROUND : #A00000;
COLOR : WHITE;
WIDTH : 20%;
MARGIN-LEFT : 40%;
MARGIN-TOP : 1%;
}

.button2 {
BACKGROUND : #A00000;
COLOR : WHITE;
WIDTH : 20%;
MARGIN-LEFT : 40%;
MARGIN-TOP : 1%;
ONLICK = "LOGINSCREEN2.HTML";
}

.DIV1 {
MARGIN-LEFT : 40%;
WIDTH : 20%;
HEIGHT : 20%;
COLOR : #A80000;
}