Question

 

I understand that elements can have multiple classes:

.rfrsh-btn {
    background-image:url(../../upload/rfrsh_nb_grey.png);
    ... 
}

.submit
{
    font-size: 0.85em;
    padding: 0;
}

This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.

But for some reason this <button> element doesn’t seem to want to display with a background image and styles applied.

Is there a reason for this? Or am I codeblind and doing something wrong.

I can’t use ID either as it’s repeated many times on the page.

Thanks all 🙂

Answer 1

There are several reasons. For instance, it’s quite possible your image path is not correct. It ‘s worth noting that paths in CSS are relative to the .css file ‘s location, and not to the including page.

To better understand what’s going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.

For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/