background double images ever plague you?

is it browser incomptabiltiy or bad code...

[ssling]

hi all,

i've got a repeated image of a button in the background of a table, with text links appearing in the cells. in ie and older versions of firefox it looks fine, but in the latest version of firefox (2.0) and in opera there is a double image. the button image fills the cell but then a second repeat image, somehow linked to the size of the text also appears, inside, lower and to the right. here's the code for the table:

<table width="255" style="height:174px;" >
<tr><th height="48" style="background-image: url(../images/button-large-3.jpg);"> <a href="/option-a.php" class="style9">Option A >></a></th>
</tr>
<tr>
<th height="15" >&nbsp;</th>
</tr>
<tr>
<th height="48" style="background-image: url(../images/button-large-3.jpg);"><a href="/option-b.php" class="style9" >Option B >></a></th>
</tr>
<tr>
<th height="15" >&nbsp;</th>
</tr>
<tr><th height="48" style="background-image: url(../images/button-large-3.jpg);"><a href="/option-c.php" class="style9">Option C >></a></th>
</tr>
</table>

and the css for style 9 is:

.style9 {
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}

this must be either a fairly common browser incompatability issue many have come across, or some dopey error in my code you will see straight away. can anyone help?

thanks very much.

[Fotiman]

I'm wondering if these in your HTML are what's causing the problem:

>>

You should be escaping those characters. So instead of

Option A >>

Try this:

Option A &gt;&gt;

[ssling]

Alas, Fotiman... i tested and those characters were not causing the problem. double image still there.

Funny thing is, I used to only get that on Opera, the previous version of Firefox was fine.

Can anyone else offer a clue please?

[tedster]

Try this:

style="background-image: url(../images/button-large-3.jpg);background-repeat: no-repeat;"

[ssling]

hi tedster,

thanks very much for your suggestion. alas that did not solve the problem.

somehow, this double image is linked to the text as it begins in line with the left most edge of the text.

anyhow, still driving me nuts... any other suggestions?

thanks!

[tedster]

Validate before going any further:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]