Hi, Experts,
I am writing some DHTML page which uses a css file.
DHTML file (The JS codes are ommitted):
CSS file:
The page looks OK in IE, but awefully wrong in Firefox. Can someone kindly show me how to fix the problem?
In addition, I don't know how to center the form. I tried set position and/or align values in DIV.outterTable and/or DIV.outterRow classes, none worked.
I am writing some DHTML page which uses a css file.
DHTML file (The JS codes are ommitted):
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" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h3> Registration Form </h3>
<form method="post" action="#" enctype="multipart/form-data" onsubmit="return isBlank(this);" name="theForm">
<div class="outterTable">
<div class="outterRow">
<div class="base-layer">
<h4>
<div class="table-caption">
Tell us about yourself (The fields with <span class="star"> * </span> are required).
</div>
</h4>
<div class="table-row">
<div class="lColumn">
<span class="star"> * </span> First Name:
</div>
<div class="rColumn">
<input type="text" name="fname" />
</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>CSS file:
Code:
body { background-color: #777777; }
h3{ font-family: Arial; font-size: 18pt; text-align: center; color: #004400; }
DIV.outterTable { width: 70%; }
DIV.outterRow {
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;
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;
width: 96%;
}
DIV.lColumn { float: left; text-align: right; width: 30%; }
DIV.rColumn { float: right; text-align: left; width: 70%; }
input {background-color: #888888; color: black; width: 95%; }The page looks OK in IE, but awefully wrong in Firefox. Can someone kindly show me how to fix the problem?
In addition, I don't know how to center the form. I tried set position and/or align values in DIV.outterTable and/or DIV.outterRow classes, none worked.