Jump to content
KateMacwil

Padding around my Menu Items

Recommended Posts

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;
}

 

menu-issue.png

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I thought they were all zeroed, but looking at the CSS again I notice the <ul> element does not have its left padding removed.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×