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

Question

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   EDIT  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    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt ff lt  title gt           lt    stylesheet link tag  all   gt           lt    javascript include tag  defaults   gt           lt    csrf meta tag   gt       lt  head gt       lt body gt           lt div id  topBar  gt               lt div id  mainNav  gt                   lt div id  logo  gt  lt   image tag  livecove jpg     gt  lt  div gt                   lt ul gt                       lt li gt Inbox lt  li gt                   lt  ul gt               lt  div gt           lt  div gt            lt    yield   gt       lt  body gt   lt  html gt

User · Accepted Answer

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    lt p class  a class  gt content will have 2px red border lt  p gt   lt p class  override a class  gt content will have 1px black border lt  p gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

put this in your  head  of your index html    lt style gt    html body      left  0      right  0      bottom  0      top  0      margin  0         lt  style gt

User · Answer

No its not  Use Meyers CSS reset    http   meyerweb com eric tools css reset

[css] 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 You Are Not Able to Edit the Offending Stylesheet

Examples related to css

Examples related to overriding