PDA

View Full Version : simple form works in firefox not in IE

cedtech23
03-07-2007, 03:41 AM
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 missing??

the code I used for the form is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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>
jlhaslip
03-07-2007, 04:33 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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 0px 0px; padding: 0 10px;}
p input {width: 140px; margin: 0; padding: 0;}
p label {width: 75px; margin: 0; padding: 3px 0;}
p.submit {clear:left; margin: .5em 0;}
p.submit input{width: 50px; margin: .25em}
</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>Take the margin off the parent and add it to the child, was the basic problem.
cedtech23
03-07-2007, 04:51 AM
[/CODE]Take the margin off the parent and add it to the child, was the basic problem.

Thanks it worked but forgive me but I am new to CSS what do you mean by the parent and the child? I see that I missed a key concept and would like to figure this out.. Thanks for your help
phoenixshade
03-07-2007, 05:25 AM
Here's a simple example illustrating a parent-child relationship between elements. Take a look at the following code:
<div id="wrap">
<div id="head">
<p>Head Stuff</p>
</div>
<div id="body">
<p>Body Stuff</p>
</div>
</div>
A child is an element nested inside another element. In the above example, the div "wrap" has two children: the "head" div and the "body" div. The <p>s are not considered children of "wrap", since they are another level deeper in the heirarchy.

Conversely, the parent of an element would be one level out: the first element in the heirarchy that contains the subject element. Therefore, the parent of the "body" div in the above example would be the "wrap" div.

An element may have many children, but only one parent. HTML is asexual. :)

There is a child selector in CSS that is often useful, for example in creating multi-level css drop-down menus. The syntax is this:
element1 > element2 { }
This style would be applied to any element2 that is a child of element1. If element2 in turn had its own element2 child, the styling would not apply to the innermost element2.
jlhaslip
03-07-2007, 07:08 AM
Awesome example, Phoenixshade. Thanks.