Does anyone know how to overrule Firefox’s internal CSS?
If you look at this page in Safari you will see a HTML rendering which emulates a Visual Design I’m currently implementing perfectly (and simply). Here is a screenshot.
Basically all I do is apply the rule float:left to the LEGEND element and it snaps inside the Fieldset as expected. While IE 6 can’t do this I can emulate it by using some position:relative / position:absolute voodoo.
Firefox can do neither — well it can, but the Firefox developers have seen fit to define the LEGEND element in the internal style sheet for forms (./res/forms.css) thus;
legend {
padding-left: 2px;
padding-right: 2px;
border: none;
position: static ! important;
float: none ! important;
}
To add insult to injury, they seem to have decided to ignore the W3C recommendation and not allow me to overrule their styles if they add !important to a rule… at least I can’t find a way.
If I delete the “float” rule from their stylesheet and reboot Firefox, it then renders my test page exactly the same as Safari does.
Does anyone know some MOZ specific mojo that lets me overrule this stylesheet in my Author stylesheet?
