Issues with top nav css

[mgn2683]

I'm having a problem with my main site navigation. I've made some changes to my easy slider that is on the same page, and the top nav seems to have adopted this. Is supposed to show:

#nav a{
    display:block;
    color: #474747;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    background: none;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 15px;
    padding-left: 15px;
}
#nav a:hover{
    color: #62A2FF;
    background-color: #3a3a3a;
}

Yet it only shows the box padding on the sides, not on the top like its supposed to. I know there is something within the screen.css file for the easyslider that is causing this, but I can't figure it out, any thoughts? It can be viewed at: [Click Here](http://mgndesign.com/)

@mgn2683

Yet it only shows the box padding on the sides, not on the top like its supposed to. I know there is something within the screen.css file for the easyslider that is causing this, but I can't figure it out, any thoughts?

The link doesn't work. Do you have a image of the website? Just take the picture of the website and save it as a png or jpg and upload it on to Daniweb.

So we can see what you are talking about.

[mgn2683]

So the navigation on rollover has the background color & padding on left/right, but not on top & botom as I specified in css above.

I think it is stemming from the css file for the screen.css file for the easyslider that is overruling this. Any thoughts, I greatly appreciate it!

Click Here

So the navigation on rollover has the background color & padding on left/right, but not on top & botom as I specified in css above.

So this is your nav bar:

<ul id="nav">
<li><a href="http://mgndesign.com/about.htm" title="About Us">ABOUT US</a></li>
<li><a href="http://mgndesign.com/services/" title="Services">SERVICES</a>
<ul>
<li><a href="http://mgndesign.com/services/web-design/" title="Web Design">WEB DESIGN</a></li>
<li><a href="http://mgndesign.com/services/graphic-design/" title="Graphic Design">GRAPHIC DESIGN</a></li>
<li><a href="http://mgndesign.com/services/branding-solutions/" title="Branding Solutions">BRANDING SOLUTIONS</a></li>
<li><a href="http://mgndesign.com/services/search-engine-optimization/" title="Search Engine Optimization">SEARCH ENGINE OPTIMIZATION</a></li>
</ul>
</li>
<li><a href="http://mgndesign.com/portfolio/" title="Portfolio">PORTFOLIO</a></li>
<li><a href="http://mgndesign.com/testimonials.htm" title="Testimonials">TESTIMONIALS</a></li>
<li><a href="http://mgndesign.com/contact.htm" title="Contact">CONTACT</a></li>
</ul>

Try to do this:

#nav a{
display:inline-block;
color: #474747;
text-transform: none;
font-size: 13px;
text-decoration: none;
background: none;
padding:7px 15px;
}
#nav a:hover{
color: #62A2FF;
background-color: #3a3a3a;
}

[mattster]

I've had a go at fixing it, and Ive found the solution! try this css:

#nav a {
    display: block;
    color: #474747;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    background: none;
    padding-top: 15px;
    height: 20px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;
}
#nav {
    list-style: none;
    text-decoration: bold;
    margin-top: 30px;
    padding-right: 20px;
    letter-spacing: .5px;
    font-family: Geneva, Sans-Serif;
    font-size: 13px;
    background: none;
    float: right;
}

Hope it works!!

[mgn2683]

That was it mattster! Thanks so much for the help!

[mattster]

no worries at all - glad to have been a help :)