Binary Kitchen

Under some circumstances, resetting the stylesheet for reducing browser inconsistencies may be a good idea. Me personally, I rarely reset a stylesheet for the websites I develop. Not because loading time increases. Who cares about additional gzipped 0.5kB these days? I rarely reset because it's dangerous and this example shows it.

For one client I am currently working for, I had to deal with Eric's CSS reset which caused trouble on Safari 4.1 only, not on other browsers. Let me explain you straight with an example.

We have a two-column layout with a fieldset in each one column. Both are left-floating and have a fixed width. On Firefox the legends of each fieldset appear on the same y-position which is correct.

But not on Safari. There the second legend for the payment fieldset wasn't on the same y-position like the other legend on the left side. It appeared further down. Strange. I checked the properties on Safari's Developer Tools and saw that margin and padding were set to zero which is correct. But then why does the legend appear further down?

I investigated every CSS line that affected the fieldset, disabled each property step by step until the fieldset was on the same height and found the cause: Eric's CSS reset! There the padding was set to zero by padding: 0, in other words, it's default behaviour was modified. Somehow Safari didn't render it properly anymore. So I removed  the tag fieldset from Eric's CSS reset and just appended ...

fieldset {
    border:0;
}

... reloaded CSS in Safari et volià it worked! Both fieldsets are now on the same height compared to all other browsers.

First I thought I could be a bug in Safari's WebKit rendering engine and checked the official bug list. It's nowhere mentioned. Because Google's Chrome is using the same WebKit rendering engine, I checked on Chrome too but there it's correct and the bug doesn't appear. So I assume it's not a bug at all. We just overwrote Safari's default behaviour with Eric Meyer's CSS reset.

Dear web developers, beware of Eric Meyer's CSS reset!