Hi there I can't figure out why my css style that is placed in the H5 tag has no affect on the h5 heading. It seems to be dominated by the parent H5 element.

How can I manipulate the css to control the tag? I'm trying to get it to sit next to the image including to vertical align the text.

See code and CSS below. The CSS element I'm having problems with is named "room-type-heading".

Any ideas would be greatly appreciated.


.room-type-container {
width: 100%;
margin: 0 0 5px;
padding: 0;
background-color: #e5ff9b;
border-bottom: 1px solid #CCC;
font: 1em/1.5em bold Arial, Helvetica, sans-serif;
.room-type-heading {
    margin: 0;
    padding: 2px 5px;
    line-height: 1.3;
    font: 1em/1.5em bold Arial, Helvetica, sans-serif;

.room-type-image {
    padding: 0;
    width: 51px;
    height: 30px;
    border-right: 4px solid #ffffcc;


          <div class="room-type-container">
          <div class="room-type-image">
            <xsl:call-template name="RoomTypeImage"/>
            <h5 **class="room-type-heading"**>This is a <xsl:choose><xsl:when test="hort_RoomTypeID = 6">Dormitory</xsl:when><xsl:otherwise><xsl:value-of select="hort_Description"/></xsl:otherwise></xsl:choose> room.</h5>

3 answers


Over ride the parent element with more specific declarations.


To give an exact answer requires more than just your snippet of code.

Can we see a sample page showing the rendered code with the problem please.

Answered about 7 years ago by Tony Crockford
  • Hi Tony. Thanks. Currently the page is on a test site that is secured but the site page goes live tomorrow so once it's up I will definitely provide a link to it and I would very much appreciate your assistance. Currently it is working but I have placed an absolute position on the h5 temporarily until I can get it sorted and place what would be more appropriate. Felicia about 7 years ago
  • +1 for the great resource on specificity. Ktash about 7 years ago
  • Hi again Tony. The page went live and here it is: http://www.bbh.co.nz/bbh_HostelSearch.aspx?bbh=detail&HostelID=346. So when you rollover in the accommodation table it is the heading text in the rollover I am referring to. Any idea what it is that may be stopping this from working correctly? Currently it is an absolute position but I would rather a float with padding Felicia about 7 years ago
Ktash 1851

I'm not sure I can say from looking at the code presented as to what is the cause of your issue, but I can maybe direct you a similar question and you can try and find the root of the issue. That should give you a good idea of where the styles are getting overridden from. That question says IE 7 and 8, but 9 also has the right tools to trace the style easily. Honestly, IE has the best support for that of the browsers at the moment.

If you're not having the issue across browsers, you might want to try a CSS Reset if you aren't already using one.

Answered about 7 years ago by Ktash
  • Thanks for your answer. I do use Firebug and that is where I can see that my code is ignored in the child element and the h5 in the main container is being recognised. I just don't know how to override the parent element. Felicia about 7 years ago

Having examined the live sample page I can see that the h5 in question has a class of .room-type-heading, but there are more specific declarations at lines 141, 145 and 207 that are affecting it, namely:

.box h2, .box h3, .box h4, .box h5, .box h6 .box a:link

.box h5

.column-container h5

They all have a specificity of (e.g) 2 whereas just the class has a specificity of 1.

To over-ride the other h5 declarations for your room-type-heading h5 you need to create a declaration more specific than class plus element.

You could try

.column-container h5.room-type-heading {}


.column-container .room-type-container h5 {}

Here's another specificity resource that might help:


Answered about 7 years ago by Tony Crockford
  • Thanks very much Tony. Will give that a go. Very helpful. Felicia about 7 years ago