Why doesn't a header respond to code to overwrite styling?

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

Answer 2

If you use FireBug you can see rest all columns are using <ul> to show the selected options. <h5> is used only for main caption. Do that and should fix your problem.

Answer 3

There are a block tags and inline tags. and h5 tags are block tags, so that it automatically add new line and margins around it although you did not put any style on it.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.3

As you see on the document as an exaple, DIV tag is block element and you can not make it sit next each other, but SPAN tag is inline elemnent, and it always sit next to each other.

To make your codes work, you need to change H5 tags, which is a block element, to inline element by doing:

h5 {display:inline}

Please just add that line in your style tag.