Posts Tagged Under: browser hack @en

Overflow in Fieldset Problem Firefox

Usually it’s Internet Explorer which grinds the gears of us web developers. But this time we came along a problem with Firefox. Elements that contain overflow definitions in a fieldset will be shown in it’s full width in Firefox. Luckly, the solution for this is pretty easy.

display: table-cell;

Define this for the fieldset element. With this definition the other Browsers will now render the fieldset element diffrently, that’s why we also need to use a Firefox Browser Hack to solve this:

@-moz-document url-prefix() {
  display: table-cell;
}

The table-cell definition will now only apply on to Firefox and each browser will show the same result.