1

The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox.

Here's the HTML, which uses a list for multiple buttons (just a single instance of a button is shown here):

<div id="buttons">
    <ul class="stencil_buttons">
      <li>
        <button type="submit" id='addField'>
           <a class="global_button" href=""><span>Button Text</span></a>
        </button>
     </li>
   </ul>
</div>

Here's the CSS:

a.global_button span {
   background: transparent url('../images/button_left.png') no-repeat 0 0;
   display: block;
   line-height: 22px;
   padding: 3px 0 5px 18px;
   color: #fff;
}

a.global_button {
   background: transparent url('../images/button_right.png') no-repeat top right;
   display: block;
   float: left;
   height: 30px;
   margin-right: 6px;
   padding-right: 20px;
   text-decoration: none;
   font-size: 14px;
}

a.global_button:hover span {
   background-position: 0 -30px; color: #fff;
}

a.global_button:hover {
   background-position: right -30px;
}

Thanks in advance for your help.

Barnee
  • 3,212
  • 8
  • 41
  • 53
David
  • 565
  • 4
  • 7
  • 14

1 Answers1

3

Try button:hover a.global_button span and button:hover a.global_button instead of the corresponding selectors above. While the selectors in the question above will work in FF when the surrounding element is not a button, they do not work when it is; My guess would be that the hover state stops at the button and does not filter down to child elements in FF.

Mara Morton
  • 4,429
  • 1
  • 21
  • 12
  • Thanks Michael -- I tried that but it seems that it removes the image until you hover over it. Hovering over it gives you just the span text, not the image. Then when you hover over it, it gives you an image, but not the right hover image. – David Jun 17 '11 at 00:55