Menu
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:
<!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> 
485
To override the user agent string from Chrome DevTools: Press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, ChromeOS) to open the Command Menu.
User-agent stylesheets User-agent, or browsers, have basic style sheets that give default styles to any document. These style sheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code.
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'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.
84
No its not. Use Meyers CSS reset :) http://meyerweb.com/eric/tools/css/reset/
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
