Image issue

[hindu times]

Hi there,

I'm having a little bit of trouble modify my colleagues old website (a new one is being made currently, but I'm tasked with fixing some issues with the current one).

Look at the blue buttons saying Previous and Next on the bottom of this page:

http://www.electrix.co.uk/view_products.php?offset=10&id=86

In IE7 they display fine, but in Safari (latest version) and Firefox, they display either "wonky" or with two arrows per button (one hiding behind the text), as if each button has been duplicated.

Any idea why this would be?

Here is the CSS for said buttons:

.beth_link_right {
    width: 100px;
    padding-right: 10px;
    padding-left: 5px;
    padding-top, padding-bottom: 0px;
    text-align: left;
    border: 1px solid #005FF8;
    cursor: pointer;
    background: url('../images/right_arrow_dark.gif') top right no-repeat;
    background-color: #005FF8;

}

.beth_link_right a {
    color: #ffffff;
    text-decoration: none;
}

.beth_link_left {
    width: 100px;
    padding-right: 5px;
    padding-left: 10px;
    padding-top, padding-bottom: 0px;
    text-align: right;
    border: 1px solid #005FF8;
    cursor: pointer;
    background: url('../images/left_arrow_dark.gif') top left no-repeat;
    background-color: #005FF8;

}

.beth_link_left a {
    color: #ffffff;
    text-decoration: none;
}

[danb737]

I would get rid of that table to align those "Previous 10" and "Next 10" buttons.

That being said, the duplicate of the arrow is caused by a

background: inherit;

in main.css line 57. Remove it and you're fine.

Then you can get this ugly table to fall below the last item if you add to your table a clear: both;