Question

I have a bit of code in this in-development page. It is the Graphic Design column in the footer. This should display like its neighbors (About Us, Web Design, etc.) but no amount of css, including !important will budge it.

Here is the html:

<div class="sub-nav">
     <h5 class="graphic"><a href="#">Graphic Design</a></h5>
     <h5 class="graphic"><a href="#">Business Development</a></h5>
     <h5 class="graphic" ><a href="#">Our Blog</a></h5>
     <h5 class="graphic"><a href="#">Contact Us</a></h5>
</div>

Here is the CSS:

.sub-nav h5.graphic a:link, .sub-nav h5.graphic a:visited    { padding-bottom: 10px !important; color: #22a9e0; border-bottom: none; font-size: 14px : }
.sub-nav h5.graphic a:hover, .sub-nav h5.graphic a:active        { font-size: 14px !important; border-bottom: none; }

I want all the h5s in the Graphic design column to look just like the headers next door. I would really appreciate some help getting this wayward section to comply.

Thanks!

Answer 1

Your problem is that you already have an h5 style declared in the CSS, this will not be overwritten, no matter what, it seems.

I would just use a <span> or an <li> like you have “next door”, as these aren’t headings of any nature 🙂