HTML Multiple classes on button element

Question

Hi, I got this button:

<button type="submit" class="rfrsh-btn submit" name="saveFields" title="Oppdater" value="">&nbsp;</button>

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

Underscores in class names can cause issues. Try renaming rfrsh_btn.

https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names

Answer 2

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/