Member Avatar for 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:

  • 3 Contributors
  • 6 Replies
  • 274 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Quick summary: the symptom (side padding visible but no top/bottom padding) usually means some other rule is constraining the line box or clipping the anchor’s box — often a height/line-height, overflow, display or positioning rule from a third stylesheet (here, the easyslider screen.css). spotted that changing the anchor display helps; ’s change (forcing a height) confirmed the visual problem could be masked by forcing the box size.

Useful quick checks

  • Inspect the computed styles for the anchor and its ancestors in DevTools. Look specifically for height, line-height, overflow, display, position and any rules from screen.css that target a, li, ul or generic a.
  • Temporarily make the anchor box obvious so you can see what’s clipped:
/* temporary debugging only — put this in your stylesheet after easyslider rules */
#nav a { outline: 2px dashed red !important; background: rgba(255,0,0,0.06) !important; }

Two robust fixes (pick one)

  • Modern / clean: make the UL a flex container so vertical alignment is explicit and unaffected by ancestor line-height:
    #nav { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
#nav a { padding: 10px 15px; text-decoration: none; }
  • Backward-compatible: explicitly control the anchor box (use box-sizing so height includes padding) and center with line-height if you don’t want to rely on flexbox:
    #nav li { float: left; }
#nav a { box-sizing: border-box; height: 40px; line-height: 40px; padding: 0 15px; }

Implementation notes: add overrides after easyslider’s CSS (or increase selector specificity) rather than using !important. The debug outline will reveal whether the easyslider rules are clipping the anchor; once identified, either remove the conflicting rule or override it with one of the stable approaches above.

Recommended Answers

All 6 Replies

Member Avatar for Member #949455

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.

Member Avatar for mgn2683

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!

Member Avatar for Member #949455

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="" title="About Us">ABOUT US</a></li>
<li><a href="" title="Services">SERVICES</a>
<ul>
<li><a href="" title="Web Design">WEB DESIGN</a></li>
<li><a href="" title="Graphic Design">GRAPHIC DESIGN</a></li>
<li><a href="" title="Branding Solutions">BRANDING SOLUTIONS</a></li>
<li><a href="" title="Search Engine Optimization">SEARCH ENGINE OPTIMIZATION</a></li>
</ul>
</li>
<li><a href="" title="Portfolio">PORTFOLIO</a></li>
<li><a href="" title="Testimonials">TESTIMONIALS</a></li>
<li><a href="" 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;
}
Member Avatar for 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!!

commented: Nice Work! +9
Member Avatar for mgn2683

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

Member Avatar for mattster

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.