IE 7 and 8 background image position issue

Again, IE 7 and 8 CSS challenge.

I have a background image uses to apply all the button background in web page.

Here is a HTML code

<span class="primary-action message-post"><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button lia-button-primary"><span>New Message</span></a></span>

In the following is my CSS code:

#lia-body .lia-content .primary-action
{
    overflow:visible;
}

#lia-body .lia-content .primary-action .lia-button-primary
{
    background-image: url("/html/assets/buttons_tcm166-1588.png");
    background-position: 100% 0;
    background-repeat: no-repeat;
  开发者_如何学C  color: #FFFFFF;
    display: block;
    line-height: 20px;
    padding: 0 22px 1px 22px;
    white-space: nowrap;
    border: none;
    font-weight: bold;
    overflow:visible;
}
#lia-body .lia-content .primary-action .lia-button-primary:hover
{
    background-image: url("/html/assets/buttons_tcm166-1588.png");
    background-position: 100% -30px;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    line-height: 20px;
    padding: 0 22px 1px 22px;
    white-space: nowrap;
    border: none;
    font-weight: bold;
}

In firefox and chrome i have the perfect output.

If we look at the IE 7 and IE8, it cuts off left part.

Any tips , thanks

Regards, Qing

Try this: (just reducing the number of classes etc... ) If it works then trace the error in your other definitions...

<span><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button-primary"><span>New Message</span></a></span>


.lia-button-primary {
     background-image: url("/html/assets/buttons_tcm166-1588.png");
     background-position: 100% 0px;
     background-repeat: no-repeat;
     color: #FFFFFF;
     display: block;
     line-height: 20px;
     padding: 0px 22px 1px 22px;
     white-space: nowrap;
     border: none;
     font-weight: bold;
     overflow:visible;
 } 
.lia-button-primary:hover {
     background-image: url("/html/assets/buttons_tcm166-1588.png");
     background-position: 100% -30px;
     background-repeat: no-repeat;
     color: #FFFFFF;
     display: block;
     line-height: 20px;
     padding: 0px 22px 1px 22px;
     white-space: nowrap;
     border: none;
     font-weight: bold;
 } 

The fragments of code you provided work fine for both versions of IE...

Origional reply:

Check your message-post class to see if the problem lies there...

And FYI update to:

   padding: 0px 22px 1px 22px;  

  background-position: 100% 0%;