Login/Register
What's the best way to override a user agent CSS stylesheet rule that gives unordered-lists a 1em margin?
Asked Answered
Solved cssoverriding
I

7

32

I'm working on a web app that has a topBar similar to facebook's blue bar at the top. I have an unordered list within the div of that bar to list some items, like Inbox, Notifications, etc. The UL has a 1em margin as defined by the user agent stylesheet of my browser. This is a problem because it's pushing my topBar down 1em. How can I override this to make the border of the ul = 0? I've read that overriding user agent stylesheets is a bad idea so I'm curious to learn what is best to do. Thanks.

Here's the CSS file:

body {
    
margin:0px;
padding:0px;
}

#topBar{
    background-color:#CCCCCC;
    height: 50px;
    width:100%;
    z-index:-1;

}

#mainNav{
    margin:0 auto;
    width:900px;
}
#logo{
    float:left;
}

#mainNav ul li{
    float:left;
    border:0px; 
    margin:0;
    padding:0;
    font-size:10px
}

And the html:

<!DOCTYPE html>
<html>
    <head>
        <title>ff</title>
        <%= stylesheet_link_tag :all %>
        <%= javascript_include_tag :defaults %>
        <%= csrf_meta_tag %>
    </head>
    <body>
        <div id="topBar">
            <div id="mainNav">
                <div id="logo"><%=image_tag("livecove.jpg") %></div>
                <ul>
                    <li>Inbox</li>
                </ul>
            </div>
        </div>
        
        <%= yield %>
    </body>
</html>
Isola answered 2/2, 2011 at 11:25 Comment(2)
Please provide us with a HTML/CSS code. It will be easier for us to help you. – Substrate
This is five years old, but it is so basic that people might seek an answer to their basic question here. Unfortunately, the OP did not have a basic understanding of cascading and inheritance and he selected (at the time of this comment) an answer that did not help. In this case, the OP relied incorrectly on inheritance. Using very specific selectors, he matched ancestors of the ul element, but this is useless because the UA rule was directly on the element. Specificity would have been useful, but directly on the element. See my answer below. – Repp
M
15

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.

Mallee answered 2/2, 2011 at 11:29 Comment(7)
Actually your example isn't working for me, on Chrome at least. No red border for first paragraph. – Substrate
@Tom thanks, there was a typo. You must have seen it before the edit. – Mallee
Just to clarify: The offending line sets ul's margin to 1em, and that's in the user-agent-stylesheet which is a browser default, which I can't change, right? So in this case I can't change the offending stylesheet and must use !important. – Isola
@Isola yes I think so. !important overrides everything - webdesign.about.com/od/css/f/blcssfaqimportn.htm Note that if a user has specified a stylesheet for their browser to use, and have used !important in said stylesheet, your !important rules will themselves be overridden. But these would be edge cases and nothing you can do could have any effect here anyway! Is the naughty stylesheet a sheet that is conditionally served to users depending on their user-agent, or are we talking about user-defined stylesheets that they have instructed their browsers to use? – Mallee
We're talking about the latter.. I think I've figured it out.. A comma is needed between ul and li in the last div declaration in my CSS file. – Isola
The comma worked for me. Thanks @Isola for posting that comment. – Ashelman
-1 because, even when the rule from a user agent style sheet contains !important, it is always possible to override this rule with a rule in the author (the OP) style sheet . If there is a rule in the User (i.e. user preference in the browser) style sheet, there is nothing the author or the user agent can do. See developer.mozilla.org/en-US/docs/Web/CSS/Cascade . – Repp
W
11

No its not. Use Meyers CSS reset :) http://meyerweb.com/eric/tools/css/reset/

Weakkneed answered 2/2, 2011 at 11:29 Comment(3)
While a reset is good, it does nothing that your own stylesheet can't already do. If his own stylesheet doesn't work, a reset won't fix it. – Crosspurpose
Yes, this is a fix you can do in your own styles...which is why I put it at the top of my styles...there are numerous little nuances that balance out between browsers. Some you're reminded of how you need to accommodate for and not let the default behavior apply. Occasionally, I want the defaults, such as with 'font'...so I just comment that line out...thanks meyer...and good post – Staminody
Definitely the sort of thing you want to do at the beginning of a project, not in the middle of it -- unless you're really stuck. I love Meyers' reset, but integrating it mid-project creates a lot of extra, unnecessary work. If you absolutely have to, pick and choose from the Reset what you think will solve your problem and add it piecemeal. – Hervey
R
9

I don't understand why nobody points to the specific issue and some answers are totally misleading, especially the accepted answer. The issue is that the OP did not pick a rule that could possibly override the margin property that is set by the User Agent (UA) directly on the ul tag. Let's consider all the rules with a margin property used by the OP. 

body {

margin:0px;
...
}

The body element is way up in the DOM and the UA rule matches an element below, so the UA wins. It's the way inheritance works. Inheritance is the means by which, in the absence of any specific declarations from any source applied by the CSS cascade, a property value of an element is obtained from its parent element. Specificity on the parent element is useless, because the UA rule matches directly the element. 

#mainNav{
    margin:0 auto;
    ...
}

This is a better attempt, a more specific selector #mainNav, which matches the mainNav element lower in the DOM, but the same principle applies, because the ul element is still below this element in the DOM. 

#mainNav ul li{
    ...
    margin:0;
    ...
}

This went too far down in the DOM! Now, the selector matches the li element, which is below the ul element.

So, assuming that the UA rule used the selector ul and not !important, which is most likely the case, the solution would have been a simple ul { margin: 0; }, but it would be safer to make it more specific, say #mainNav ul { margin: 0 }.

Repp answered 9/4, 2016 at 1:44 Comment(2)
Thanks. This fixed it: #mainNav ul li{ ... margin:0; ... } – Discrepant
I had the same problem and as explained by user2066805 in 2016, the User Agent Stylesheet was specifically setting the ul element and until I specified that element in my own custom.css file with !important, it continued. – Viewpoint
C
4

put this in your "head" of your index.html

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>
Conscientious answered 28/9, 2014 at 20:19 Comment(1)
That will not work if, as is most likely the case, the User Agent (UA) rule directly matches the ul element. This is not the way to override a UA sheet. – Repp
C
2

Everything you write in your own stylesheet is overwriting the user agent styles - that's the point of writing your own stylesheet.

Crosspurpose answered 2/2, 2011 at 11:28 Comment(4)
I have my own stylesheet but it's unable to override – Isola
@John: Then please post some of the HTML/CSS that doesn't seem to be working, as this is a fairly standard thing to do. – Crosspurpose
@Isola - maybe your style sheet is getting called before the UA stylesheet somehow ? – Girlhood
This is way better than the accepted answer. It says the main point, which was missed in the accepted answer. However, it could have contained more specific explanations. – Repp
M
2

I had the same issues but nothing worked. What I did was I added this to the selector:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Melody answered 19/1, 2017 at 22:49 Comment(0)
P
0

The default behavior of unordered lists (the default symbols being disc, circle and square in cycle) is supposed to be implemented using the counter style rule.

Specifically, the list-style-type property values for unordered lists supposed to be implemented like this:

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25AA;
  /* ▪ */
  suffix: " ";
}

Unfortunately, you can't override it in any way, you can only introduce your own counter style. And the implementation of it in different browsers is not standardised. They don't follow this W3C/WHATWG recommendation and the tests are not even written to verify it.

I suppose, this was done to preserve backward compatibility, as disc circle and square were implemented before w3c specified how they should be implemented.

So, TL;DR you can't style the reserved disc, circle or square list style type, they're fixed in stone, obsolete and useless.

Plugugly answered 16/7 at 22:35 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.