Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

Support Requests: Question Headers misaligned in Firefox when using Gridrow for the Section

Bottom of Page

1 to 7 of 7

  1.  
  1.  
    Please see http://www.tfaforms.com/205163

    Under Event Category, select All-Star Cheer.
    Under Cheer & Stunt Group Options choose a number for each Partner Stunt and Group Stunt Groups.
    Fields will appears for the user to input their group member names. The headers for these fields look perfect in IE 8 but are misaligned in Firefox 5. Any ideas as to why and how I can fix it?
    • CommentAuthorhillaryw
    • CommentTimeAug 10th 2011 edited
     
    Hello,
    Your issue stems from the differences in browser compatibility. Here are two options for you, I would suggest using the second (label on top), as it is more user friendly and is not as susceptible to more browser compatibility issues.
    http://screencast.com/t/SxUH1eN4JH

    Happy to help further,
    Hillary
  3.  
    You didn't quite get to the fields I was referring to. The text fields appear after selecting 1-5 for either/both Partner Stunt and Group Stunt groups. The text fields (not the drop down fields) have the headers I am having issues with, not the ones you demo in your screencast there. Thanks.
    • CommentAuthorhillaryw
    • CommentTimeAug 11th 2011
     
    Sorry about that, but we can do that.
    Add:
    .wForm legend {
    font-size: 14px !important;
    }
    to the CSS of your form.

    Hope this helps,
    Hillary
  5.  
    The legend tags are fine, it's the th tags that are proving to be misaligned in FireFox. Let me pull some code:

    <fieldset id="tfa_PARTNERSTUNTGROU" class="wfSection required-one offstate-o offstate-p offstate-q offstate-r offstate-s">
    <legend>Partner Stunt Member Names ::</legend>
    <table>
    <tr class="headerRow">--------------------------------------------------------

    <th> </th>
    <th>Member One: </th> This whole table row does not align over the other rows in the table when viewed in FireFox
    <th>Member Two: </th>
    <th> </th>
    </tr>-----------------------------------------------------------------------------
    <tr id="tfa_TeamOne" class="offstate-o offstate-p offstate-q offstate-r offstate-s alternate-0">
    <th>grp 1 </th>
    <td><div id="tfa_MemberName-D" class="oneField"> <input type="text" id="tfa_MemberName" name="tfa_MemberName" value="" size="15" class="validate-alphanum required"> </div></td>
    <td><div id="tfa_8197469790471-D" class="oneField"> <input type="text" id="tfa_8197469790471" name="tfa_8197469790471" value="" size="15" class="validate-alphanum required"> </div></td>

    <td><div id="tfa_7965877332273-D" class="oneField"> <span id="tfa_7965877332273" class="choices required"><span class="oneChoice"><input type="radio" value="tfa_AllGirl6" class="" id="tfa_AllGirl6" name="tfa_7965877332273"><label for="tfa_AllGirl6" class="postField">All Girl</label></span><span class="oneChoice"><input type="radio" value="tfa_CoEd6" class="" id="tfa_CoEd6" name="tfa_7965877332273"><label for="tfa_CoEd6" class="postField">Co-Ed</label></span></span> </div></td>
    </tr>

    ...
    • CommentAuthorhillaryw
    • CommentTimeAug 11th 2011
     
    Hello,

    It looks like a new update in the webkit rendering engine has changed how the block / table-row layout is handled in CSS. Our setup for multiply conditional rows in tables is a slight hack to work with older copies of IE, and it looks like this update broke it a little. Note that this issue doesn't apply to non-conditional table rows ... those should still be fine.

    A per form fix is pretty easy. Just append:

    <style>
    .wForm form tr[class*='onstate'] {
    display: table-row !important;
    }
    </style>

    to your custom code block for your form. This forces the proper display layout to be set for displayed multiplely conditional rows in modern browsers, while the older browsers should ignore it safely ( since they don't support the CSS-L3 selector '*=' ). I've added this to your form and it's working for me, but give it a whirl yourself. Note that if you've copied and pasted your form anywhere, you'll need to do it again to get the updated custom code.

    If everything is working ok for you now, please delete the 'support test' form in your account and give us an update here.

    Drew
    FA Support
  7.  
    That CSS worked like a charm, thank you. Note that when I embed the form onto my own website page the code does not take affect until I add that CSS to my site's custom CSS template (being on the form page itself does not do the trick). Thanks again, I will delete the support test you created on my account.

1 to 7 of 7

  1.