html - CSS code works if put in style="", fails if put in external css file

Question

I have some html in this format:

<ul id="foo">
    <li class="bar"><a href="#">Reports</a>
      <span>
        <a href="#" class="fooLink">First Report</a>
        <a href="#" class="fooLink">Second Report</a>
     </span>
  </li>
</ul>

Essentially, I want the 'reports' link in the menu to expand when clicked, and display the links below it, padded to the side, so it looks like this:

Reports
   First report
   Second report

This is my css code:

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block;
}

However this doesn't work. If I examine the links in firebug, I see that the display:block; line is blocked. However if I do this:

<a href="#" 
   style="padding-left:20%; padding-top:0px; display:block;">Second Report</a>

Then it works as I want it. Why doesn't it work if i put it in the css class?

Answer 1

check your other CSS declarations for conflicting styles, paying close attention to Specificity. Firebug should give you what CSS is actually applied, and where it's coming from.

http://jsfiddle.net/PEbRQ/

seems to work (though its an embedded CSS block, not an external file.