htmlcssjquery-uijqgridcss-reset

CSS reset interferes with a third party HTML/CSS component

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)?

Solution

  • 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".