Question

I have a form in a table, and on errors I am putting a red border around the error-stricken rows, by specifying a border on the tr element for that row.

This works just fine in Chrome. However, in Firefox (4 and 5), I am seeing various glitches in the display. Notably, in one case I have the border “bleeding” down the sides of the next row.

Edit: Another twist is that the extension of the border downwards varies unpredictably as I scroll up and down.

Live version here: http://testing.tustincommercial.com/incorporate/
(To trigger the error, just scroll to the bottom, and submit the form with the “next” button).

HTML:

<tr class="registered_office_row error" id="registered_office_row">
   <th><span id="for-id_registered_office-">Registered office address:</span><div class="errorlist"><div class="erroritem">This field is required.</div></div></th>
   <td><textarea name="registered_office" cols="40" rows="10" id="id_registered_office"></textarea></td></tr>
<tr class="registration_country_row  registration_country_row" id="registration_country_row">
   <th><span id="for-id_registration_country_0-">Registration country:</span></th>
   <td><label for="id_registration_country_0" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>England and Wales</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="EW" id="id_registration_country_0" checked="checked" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Wales</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="CY" id="id_registration_country_1" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Scotland</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="SC" id="id_registration_country_2" class="ui-helper-hidden-accessible">
      <label for="id_registration_country_3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Northern Ireland</td></tr></tbody></table></span></label><input type="radio" name="registration_country" value="NI" id="id_registration_country_3" class="ui-helper-hidden-accessible">
</td></tr>
<tr class="company_type_row  company_type_row" id="company_type_row"><th><span id="for-id_company_type_0-">Company type:</span></th><td>
     <label for="id_company_type_0" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Private company limited by shares</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="LTD" id="id_company_type_0" class="ui-helper-hidden-accessible">
     <label for="id_company_type_1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Private company limited by guarantee</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="LTG" id="id_company_type_1" checked="checked" class="ui-helper-hidden-accessible">
     <label for="id_company_type_2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Public limited company</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="PLC" id="id_company_type_2" class="ui-helper-hidden-accessible">
     <label for="id_company_type_3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Unlimited company with share capital</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="USC" id="id_company_type_3" class="ui-helper-hidden-accessible">
     <label for="id_company_type_4" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><table class="labelcenterer"><tbody><tr><td>Unlimited company without share capital</td></tr></tbody></table></span></label><input type="radio" name="company_type" value="UWS" id="id_company_type_4" class="ui-helper-hidden-accessible">
</td></tr>

CSS generating the red border:

.error {border-width: 1px; border-color: red; border-style: solid;}

So, my questions:

1. is there a good way to stop this bleeding happening?
2. is this because I am using some kind of standards-violating feature, or is Firefox buggy in this respect?

Answer 1

After having a play around with the zoom in FF i can produce similar results, click view > zoom > reset and see if that resolves the issue