0

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;
}
2
Contributors
1
Reply
3
Views
5 Years
Discussion Span
Last Post by akhena
0

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;

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.