Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

A page works with I, but not with Firefox. 1

Status
Not open for further replies.
lcs01

lcs01

Programmer
Aug 2, 2006
182
US
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:
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:&nbsp;
        </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:&nbsp;
        </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&#39;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%; }
 
Sort by date Sort by votes
I've taken the liberty of reworking some of the css and some of the html to make this look good in Firefox (and Safari) -- both on MacOSX. The HTML doesn't have as many nested divs - and I've introduced the <label> tag for your labels.
CSS: 
body {
	background-color: #777777;
	font-family: Arial;
	color: #004400; 
}
h3 {
	font-size: 18pt;
	text-align: center;
}
.warning {
	background-color: #ff3366;
	font-weight: bold;
}
.star {
	font-size: 10pt;
	font-weight: bold;
	color: red;
}
.base-layer {
	background: #cc9966;
	border: solid black 1px;
	font-size: 12pt;
	font-weight: bold;
	color: #004400;
	margin: 0.5em 12px;
	padding: 0.5em;
	text-align: left;
}
.table-row {
	background: none #ffffcc;
	font-size: 10pt;
	color: #004400;
	clear: left;
	height: 1.7em;
	padding: 4px 0;
}
input.normal {
	background-color: #888888; 
	color: black; 
	width: 70%;
	float: left;
}
label {
	font-weight: normal;
	float: left;
	width: 27%;
	text-align: right;
}
form {
	width: 70%;
	margin: 0 auto;
	background: #999999;
	padding: 5px;
}
.submitButtons {
	text-align: center;
}
.submitButtons input {
	font-weight: bold;
	width: 25%;
}
HTML: 
<h3>Registration Form</h3>
<form method="post" action="#" enctype="multipart/form-data" name="theForm">
	<div class="outterRow">
		<div class="base-layer">
			Tell us about yourself (The fields with <span class="star"> * </span> are required).
			<div class="table-row">
				<label for="fname"><span class="star"> * </span> First Name:&nbsp;</label>
				<input type="text" name="fname" id="fname" class="normal" />
			</div>
			<div class="table-row">
				<label for="lname"><span class="star"> * </span> Last Name:&nbsp;</label>
				<input type="text" name="lname" id="lname" class="normal" />
			</div>
		</div>
	</div>
	<div class="submitButtons">
		<input type="submit" name=".submit" value="I Agree" /> 
		<input type="reset" name=".reset" value="I Don&#39;t Agree" />
	</div>
</form>
Pick and choose what you want to keep [smile]

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Thank you so much, Jeff.

Your codes work beautifully with both browsers on different platforms (NT & Linux). but, I have further questions:

1) what is "clear: left;" defined in table-row class? I can not see the difference it makes.

2) Is 'for="fname"' a must in '<label for="fname">'. It seems to me that '<label>' alone would work just fine.

3) How many attributes/properties are there for a css class? could you please recommend a good web site? I am relatively new to css and I found these two sites are helpful:


Again, thank you so much for your help!
 
Upvote 0 Downvote
1. Clear says that the element should begin at the bottom of the last floated item, not next to it. Sometimes IE likes to clear elements on its own, because it thinks you want it to. FF would probably show the difference.

2. for in a label specifies which element the label refers to. In a visual browser this means that clicking on the label text will operate the input field (select/deselect radio or checkboxes, give focus to textboxes).

3. You can put as many css attributes in a class as you want. Which will apply depends on the element you're defining. Say text-align will only work on block level elements and so on. The W3Schools reference is very good, above that I would only suggest the W3 spec page on CSS.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
One more question to follow:

In Jeff's code, the form class does not define the position, but why is it centered?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
788
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
135
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top