Web Analytics Made Easy -
StatCounter Form spacing issue in Firefox - CodingForum

Announcement

Collapse
No announcement yet.

Form spacing issue in Firefox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Form spacing issue in Firefox

    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/...fformissue.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

  • #2
    Form spacing issue in FF - fixed... I think

    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

    Comment

    Working...
    X