Hi, Experts,
I wrote a simple webpage using css, which is OK with IE, except the table form is not centered (I don't know why). But it is awefully wrong with Firefox 1.5.
I appreciate someone could help me to make the page work with both browsers.
Here is my html code:
And here is my css code:
I wrote a simple webpage using css, which is OK with IE, except the table form is not centered (I don't know why). But it is awefully wrong with Firefox 1.5.
I appreciate someone could help me to make the page work with both browsers.
Here is my html code:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en-US" xml:lang="en-US">
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="./msf_style.css" />
</head>
<body onload="change(document.getElementById('countryID'))">
<h3>Registration Form</h3>
<form method="post" action="#" enctype="multipart/form-data" name="theForm">
<div class="outterTable">
<div class="outterRow">
<div class="base-layer">
Tell us about yourself (The fields with <span class="star"> * </span> are required).
<div class="table-row">
<div class="lColumn">
<span class="star"> * </span> First Name:
</div>
<div class="rColumn">
<input type="text" name="fname" class="normal" />
</div>
</div>
<div class="table-row">
<div class="lColumn">
<span class="star"> * </span> Last Name:
</div>
<div class="rColumn">
<input type="text" name="lname" class="normal" />
</div>
</div>
</div>
</div>
<div class="outterRow">
<input type="submit" name=".submit" value="I Agree" style="font-weight:bold;width:25%;" /> <input type="reset" name=".reset" value="I Don't Agree" style="font-weight:bold;width:25%;" /> </div> </div>
</form>
And here is my css code:
Code:
body { background-color: #777777; }
h3{ font-family: Arial; font-size: 18pt; text-align: center; color: #004400; }
.warning {background-color: #ff3366; font-weight: bold; }
DIV.outterTable {
/* position: center; align: center; */
width: 70%;
}
DIV.outterRow {
/* position: relative; align: center; */
background: #999999;
text-align: center;
width: 96%;
}
.star {
font-family: Arial;
font-size: 10pt;
font-weight: bold;
color: red;
}
DIV.base-layer {
background: #cc9966;
border: solid black 1px;
font-family: Arial; font-size: 12pt; font-weight: bold;
color: #004400;
margin: 0.5em 12px 0.5em 12px;
padding: 0.5em;
text-align: left;
}
DIV.table-row {
background: none #ffffcc;
font-family: Arial; font-size: 10pt; font-weight: normal;
color: #004400;
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
/* valign: center; */
width: 96%;
}
DIV.lColumn {
float: left;
text-align: right; width: 30%;
}
DIV.rColumn {
float: right;
text-align: left; width: 70%;
}
input.normal {background-color: #888888; color: black; width: 95%; }