CSS reset interferes with a third party HTML/CSS component

Question

I use Eric Meyer’s CSS reset and jqGrid (jQuery Grid plugin).

The reset interferes with the CSS styling of the grid, and the grid looks unacceptable.

What is the common way to solve this sort of problem (a CSS reset affects a third party component on your page)?

Answer 1

First of all you should include Eric Meyer’s CSS reset at the first CSS style which you use. It's designed to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings. So it should changes browser defaults, but not any explicit settings of CSS which you use.

The only style which I find a little suspected in the "Eric Meyer’s CSS reset" is the setting

table { border-collapse: collapse; }

It's the only CSS style which seems have some correlation with jqGrid CSS. So I suggest that you include additional CSS

.ui-jqgrid table {
    border-collapse: separate;
}

which changes border-collapse inside of jqGrid. The demo uses the style and the results looks the same like in the grid without "Eric Meyer’s CSS reset".

Answer 2

What is your reason for using the reset? I would never use one. If it's affecting your third-party stuff, and you can't give a reason for using one, get rid of it. You're probably setting values for your elements anyway and, thus, overriding the reset on top of that.