tableless form not works in FireFox but not IE 1

vttech · Mar 6, 2007

I am creating a basic form with only css. I am having issues were the label and input fields are not lining up on the left hand side in Internet Explorer. But in firefox they line up correctly. A sample of the form can be seen at

http://nucitytech.com/chcb/form_lookup.php

Can someone tell me what I am doing wrong??

the code I used for the form is below

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-US" lang="en-US">
<head>
	<title>Form Lookup</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {font-family: verdana; font-size: 12px;}

fieldset{width: 500px; margin: 0 0; padding: 0 0;}

p {float:left; margin: 0 10px 10px; padding: 0 0;}
p input {width: 125px; margin: 0 0; padding: 0 0;}
p label {width: 75px; margin: 0 0; padding: 0 0;}
p.submit {clear:left; }
p.submit input{width: 50px; }
</style>
</head>
<body>
<form method="post" action="" >
<fieldset>
<p><label for="fname">First Name<br /></label><input type="text" name="fname" id="fname" /></p>
<p><label for="lname">Last Name<br /></label><input type="text" name="lname" id="lname" /></p>
<p><label for="form_id">Form ID<br /></label><input type="text" name="form_id" id="form_id" /></p>
<p class="submit"><input type="submit" name="submit" value="Find" /></p>
</fieldset>
</form>
</body>
</html>

Newbie in search of knowledge

vttech · Mar 6, 2007

Thanks I figured it out it was this line

Code:

p {float:left; margin: 0 10px 10px; padding: 0 0;}

once I switched it to the code below it worked.

Code:

p {float:left; margin: 0; padding: 0 10px;}

but I have another cross browser issue if you look at the form
below in IE it will look good but in Firefox a line show up above the submit
button. I have a hidden field and if I take that field out then the line does not show up in firefox. What is causing this to happen?

http://nucitytech.com/chcb/facform/facilities_form.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-US" lang="en-US">
<head>
	<title>Service Request</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {font-family: verdana;}
h4 {margin: 0 0; padding: 0 0; text-align: center;}
p {font-size: 14px;}
fieldset {width: 760px; padding: 10px 10px; font-size: 12px;}
label {width: 300px;float: left;display: block;text-align: right;}

div select, div input, div textarea {
border:1px solid #999999;
display: block;
float:left;
background:#CCCCCC;
padding: 0 0;
margin: 0 0 15px 5px;}

div {clear: left; }

textarea {width: 400px; height: 200px;}
select, input {width: 110px;}

div.submit {margin:0 0 ;padding: 0 0;background: #CCCCCC;}

#container {width: 780px; }

.cur_date {margin-right: 5px;}

</style>

</head>
<body>
<div id="container">
<h4>Facilities Request Form</h4>
<p>Fill in the mandatory fields denoted with a "*" to request service.</p>
<form method="post" action="/chcb/facform/facilities_form.php">

<fieldset>
<div><label for="wo_type">Work Order Type: *</label>
	<select name="wo_type" id="wo_type">
		<option></option>
		<option>Maintenance</option>
		<option>Repair</option>
	</select></div>

<div><label for="priority">Priority: *</label>
	<select name="priority" id="priority">
		<option></option>
		<option>Low</option>
		<option>Medium</option>
		<option>Hign</option>
	</select></div>

<div><label for="request_date">Requested Completion Date: *</label>
<input class="cur_date" type="text" name="request_date" id="request_date"
/>MM-DD-YYYY</div>

<div><label for="location">Location: *</label>
	<select name="location" id="location">
		<option></option>
		<option>Riverside</option>
		<option>Pearl St.</option>
		<option>Safe Harbor</option>
		<option>HO Wheeler</option>
	</select></div>

<div><label for="request_by">Requested By: *</label>
<input type="text" name="request_by"
id="request_by" value=""/></div>

<div class="textarea"><label for="descr">Description of Task: *</label>
<textarea name="descr" id="descr" rows="" cols="" ></textarea></div>

<input type="hidden" name="validate" value="yes" />

<div class="submit"><input type="submit" name="submit" value="Email" /></div>
</fieldset>
</form></div>
</body>
</html>

Newbie in search of knowledge

Vragabond · Mar 6, 2007

By default, input with the type="hidden" will have its display property set to none. However, in your CSS you are explicitly stating that you want all your inputs to be shown as blocks (display: block

. This will overwrite the default setting and bring the hidden field in plain view (whereas the field is zero px high and so it appears only as a line.

I suggest you add this to your stylesheet:

Code:

input[type=hidden] {
  display: none;
}

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!

tableless form not works in FireFox but not IE 1

vttech

Technical User

vttech

Technical User

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor