PDA

View Full Version : Form spacing issue in Firefox



mssteph
Apr 16th, 2009, 08:39 PM
Hi Everyone,

I'm having an issue with the cell spacing in a form. It looks fine in IE7, but in Firefox there isn't enough empty space above the Comments field.

I'm sorry I can't provide a link as the page is not available on a live site at the moment. I can, however, link to a screen shot:

http://img7.imageshack.us/img7/7651/codingforumsffformissue.jpg

The HTML is as follows:

=====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>
</head>
<body>

<div class="form-wrapper">
<!--FORM BEGIN-->
<form>
<table width="100%" border="0" class="form-copy" cellpadding="0" cellspacing="0">
<tr>
<td width="19%" height="31"><label>First Name:</label>
<span class="required">*</span></td>
<td width="81%" height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td height="31"><label>Last Name:</label>
<span class="required">*</span></td>
<td height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td height="31"><label>Email Address:</label>
<span class="required">*</span></td>
<td height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td width="19%" height="31"><label>Phone:</label></td>
<td width="81%" height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td height="31"><label>Address:</label></td>
<td height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td height="31"><label>City:</label></td>
<td height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td height="31"><label>State:</label></td>
<td valign="middle" height="31"><div class="formstate-cont">
<select name="challengestate" style="width: 60px;">
<option selected value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PR">PR</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
</div>
<div class="formziptxt-cont"><span class="formtext-double">Zip:</span></div>
<div class="formzip-cont">
<input type="text" size="10" class="formzip-bg" />
</div></td>
</tr>
<tr>
<td height="31"><label>Company:</label></td>
<td height="31"><input type="text" size="30" class="form-bg" /></td>
</tr>
<tr>
<td valign="top" height="31"><label>Comments:</label>
<span class="required">*</span></td>
<td height="31"><textarea name="textarea" cols="40" rows="8" class="form-bg"></textarea></td>
</tr>
<tr>
<td height="31"></td>
<td height="31"><input name="Submit" type="button" value="Send" style="margin: 10px 10px 0 0; float: left;" class="button"/>
<input name="Clear" type="reset" value="Clear" style="margin: 10px 0 0 0; float: left;" class="button"/></td>
</tr>
</table>
</form>
<!--FORM END-->
</div>

</body>
</html>
=====

And the CSS is as follows:

=====
.form-wrapper {
margin: 0;
padding: 15px 30px 0 30px;
height: auto;
width: 612px;
float: left;}

.form-copy {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 10pt;}

.button {
margin: 0;
padding: 2px 0 2px 0;
background-color: #f58220;
border: 1px solid #ffffff;
color: #ffffff;
font-weight: bold;
height: 28px;
width: 70px;}

.form-bg {
margin: 0;
padding: 3px;
color: #59a54c;
border: 1px solid #ffffff;
background:url(../images/form-bg.png) top left repeat;}

.formzip-bg {
margin: 0;
padding: 3px;
color: #59a54c;
border: 1px solid #ffffff;
background:url(../images/form-bg.png) top left repeat;}

.formtext-double {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 10pt;}

.formstate-cont {
margin: 0;
padding: 3px 0 0 0;
height: auto;
width: auto;
float: left;}

.formziptxt-cont {
margin: 0;
padding: 8px 15px 0 25px;
height: auto;
width: auto;
float: left;}

.formzip-cont {
margin: 0;
padding: 0;
height: auto;
width: auto;
float: left;}

.required {
margin: 0;
padding: 0;
color: #f58220;
font-size: 9pt;}
=====

I also have attached a reset CSS file... :

=====
/* Resets */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;}

/* remember to define focus styles! */
:focus {
outline: 0;}

body {
color: black;
background: white;}

ol, ul {
list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;}

caption, th, td {
text-align: left;
font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";}

blockquote, q {
quotes: "" "";}
=====

...but I have played with it a bit (as well as temporarily removing it altogether) and it seems to not affect the form, as far as I can tell. Thought I'd include it here just in case.

Any help would be greatly appreciated, thanks!

-Steph

mssteph
Apr 16th, 2009, 09:45 PM
Hi again,

I think I found a solution (if not *the* solution), which was to give the form-bg class itself a top margin.

Any other input would still be appreciated, as to why the problem came about in the first place.

Thanks,

Steph