KateMacwil Posted April 6, 2018 Share Posted April 6, 2018 Hi I am trying to create a menu and for some reason I am getting padding around the outside of my menu items and my list items seem to be about 10px in from the margin which I don't want. How do I fix this? #sub-navigation { background-color: #f6f6f6; border: 1px groove #0c6bb5; margin: 0px; } #sub-navigation ul { list-style-type: none; margin-left: 0px; margin: 0px; } #sub-navigation li { background-image: url("http://dev.townofbauline.ca/wp-content/uploads/2018/04/menuBack-01.jpg"); color: #FFFFFF; text-decoration: none; font-family: Arial; font-size: 13px; font-weight: semi-bold; margin:0px; padding:0px; } #sub-navigation a:hover { color: #FFFFFF; text-decoration: none; } #sub-navigation a:active { color: #FFFFFF; background-color:#0c6bb5; text-decoration: none; } #sub-navigation a:visited { color: #FFFFFF; text-decoration: none; } Link to comment Share on other sites More sharing options...
Ingolme Posted April 6, 2018 Share Posted April 6, 2018 Without seeing the page itself, or at least the HTML, I can only make guesses. It looks as if there are more elements than the ones that your CSS is styling. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2018 Share Posted April 7, 2018 By default the ul element has padding to left for bullet points, that is why you should zero padding, margins, and text-indent as well as setting list-style-type: none; to normalize for all browsers, then set your own styling. Link to comment Share on other sites More sharing options...
Ingolme Posted April 7, 2018 Share Posted April 7, 2018 I thought they were all zeroed, but looking at the CSS again I notice the <ul> element does not have its left padding removed. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2018 Share Posted April 7, 2018 (edited) It doesn't have any padding removed? Not only padding left, that is why you zero everything, as different browsers have different stying, zeroing all, means you cover all browsers. Edited April 7, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now