0

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/)

3
Contributors
6
Replies
9
Views
4 Years
Discussion Span
Last Post by mattster
0

@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.

0

Picture_6

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

0

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

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!!

Votes + Comments
Nice Work!
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.