...

View Full Version : Form acting strange in FF



Crispy
11-27-2009, 02:34 PM
Hey guys,

I've created my contact form, works great in IE and Chrome, but in FF it looks really strange, http://fier.co.uk/contact.php I would really appreciate some help fixing it for firefox

HTML


<div id="left">

<form id="quote" class="fl" method="post" action="contact/contact.php">
<fieldset class="info">
<label for="name"><p>Name<small>Required</small> </label> <input type="text" id="name" name="name"/>
<label for="email"><p>Email Address</p><small>Required</small> </label> <input type="text" id="email" name="email"/>
<label for="telephone"><p>Phone Number</p></label> <input type="text" id="telephone" name="telephone"/>
<label for="url"><p>Current Website</p></label> <input type="text" id="url" name="url"/>
<label for="subject"><p>Subject</p></label> <input type="text" id="subject" name="subject"/>
<label for="details"><p>Message</p><small>Required</small></label>
<textarea id="details" name="details" rows="5" cols="60"></textarea>
</fieldset>
<button name="submit" id="submit" value="submit" class="fr">send</button>

</form>

</div><!-- end left -->


CSS


@charset "utf-8";

.fr{float:right;}
*form#quote{width:450px;}
small {font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:10px;}

#contact-form label { float:left; }
#contact-form input[type=text] { float:right; }


input
{
padding: 6px 5px;
border: 1px solid #CCCCCC;
float:left;
width:320px;
margin-bottom:20px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

button#submit{
display:block;
padding:5px;
text-align:center;
border:none;
cursor:pointer;
margin-top:20px;
margin-right:50px;
background:#0c2037;
font-variant:small-caps;
font-weight:bold;
color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
margin-left:392px;

}

button#submit:hover{background-color:#142946;}


label { font-weight: normal;
clear:both;
float:left;
width:105px;
font-weight:bold;
}

label small{width:100%; display:block; font-weight:400}

span.req{color:red;
font-weight:bold;
font-size:11px;
}


textarea
{
padding: 6px 5px;
height: 145px;
width: 320px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}



Maybe it's something really simple I'm missing?

Thanks for your time.

drhowarddrfine
11-27-2009, 03:23 PM
Mostly your p tags in the form are in the wrong places. As always, validate your html and css for those lists of errors.

Firefox is performing correctly.

Kor
11-27-2009, 04:39 PM
You have not closed some of your tags. Under XHTML Doctype rules are strict: all the tags must be closed. For instance: every <p> must have a </p> end tag.

On the contrary, some other place I see you have some extra end tags which close nothing. For instance you have a wrong line (line 81 I presume) : </ul></li>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum