What's the Best Way to Override a User Agent CSS Stylesheet Rule That Gives Unordered-Lists a 1Em Margin

What's the best way to override a user agent CSS stylesheet rule that gives unordered-lists a 1em margin?

If You Are Able to Edit the Offending Stylesheet

If the user-agent stylesheet's style is causing problems for the browser it's supposed to fix, then you could try removing the offending style and testing that to ensure it doesn't have any unexpected adverse effects elsewhere.

If it doesn't, use the modified stylesheet. Fixing browser quirks is what these sheets are for - they fix issues, they aren't supposed to introduce new ones.

If You Are Not Able to Edit the Offending Stylesheet

If you're unable to edit the stylesheet that contains the offending line, you may consider using the !important keyword.

An example:

.override {
    border: 1px solid #000 !important;
}

.a_class {
    border: 2px solid red;
}

And the HTML:

<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>

Live example

Try to use !important only where you really have to - if you can reorganize your styles such that you don't need it, this would be preferable.

How to override the user-agent styling?

The user agent stylesheet is just the default styling that elements come with.

Any CSS rule that applies to an element will override the values from a user agent stylesheet.

So just write a ruleset with a selector that matches the element, with a property that matches what you want to change and a valid value for that properly.

div {
    display: inline;
}

Overwrite/disable user stylesheet in chrome

After looking around alot, I found out that the issue is an extension which defined:

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

By editing the stylesheet of that extension (or removing the extension completely) this issue is fixed.

So basically I dislike the way how chrome displays this in de styles-sidebar of the developer tools, it showed it as user stylesheet instead of pointing to the stylesheet of the extension.

Thanks for the answers anyhow.

Unwanted Padding In CSS

I just got the point. User agent stylesheet is giving out the padding value in addition to the padding value you mentioned into #agent li CSS part. I just took interest to remove that CSS in chrome DOM inspector and site looked fine for me

What is a user agent stylesheet?

What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.

How does the default user agent stylesheet style lists differently depending on their layout?

This leads me to believe that for the user agent there are not static defaults for each element as I used to believe, but a custom style sheet with a bunch of rules (e.g. testing for nested lists).

Yes, that's exactly the case. Every UA stylesheet contains defaults for a variety of situations. And many of these complex defaults are standardized in the HTML spec along with the simple (by element type) ones, although each UA is of course free to customize (as you put it) its defaults.

In this case, the default ul and ol margins are simply zeroed out for any such elements that are nested. The UA doesn't apply any margins directly to li elements or perform any non-CSS special-casing logic. Here's how the HTML spec expresses it in terms of CSS:

dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }

:matches(dir, dl, menu, ol, ul) :matches(dir, dl, menu, ol, ul) {
  margin-block-start: 0; margin-block-end: 0;
}

Here's how Firefox does it:

/* nested lists have no top/bottom margins */
:-moz-any(ul, ol, dir, menu, dl) ul,
:-moz-any(ul, ol, dir, menu, dl) ol,
:-moz-any(ul, ol, dir, menu, dl) dir,
:-moz-any(ul, ol, dir, menu, dl) menu,
:-moz-any(ul, ol, dir, menu, dl) dl {
  margin-block-start: 0;
  margin-block-end: 0;
}

And how Chrome does it:

ol ul, ul ol, ul ul, ol ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

The only implementation differences are that Firefox continues to use its experimental :-moz-any() pseudo-class, and Chrome hasn't implemented the standard logical properties yet so it continues to use the non-standard -webkit-margin-* properties, and it only does this with ul, ol but not dir, dl, menu. But the principle is the same.

What's the simplest CSS change that can bring a dramatic (non-destructive) aesthetic change to a web design?

The simplest changes are generally to colour and background colour. If your site is a light colour theme (light background, dark text), reverse this. It will make a big impact.

Another simple change is to update all the fonts. For instance if you're mainly using sans-serif fonts (Arial, Verdana), change over to serif (Georgia is an excellent choice for this).

---

Related Topics