Firefox repeats the background-image-HELP!

Works fine in IE, background-repeat already set to none;

[dcmcwhorter]

I have a background-image in my CSS that I do not want to repeat. It is just a little box next to the link used by left navigation. I get a repeating image if the link is more than 2 lines. This is driving me insane. It works fine in IE, but not in Firefox.

CSS class:
.sidelinks {
background-image: url(images/navBulletNew.gif);
background-repeat: no-repeat;
background-position:top;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
font-size: 11px;
font-weight: bold;
color: #595eb4;
margin-left:10px;
}

html (the issue occurs on the last link "Website Request Form"):
<table><tr>
<td width="186" valign="top" style="border-right:1px solid #C6C6C6;">
<!-- start links -->
<!-- start links -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="nav">
<tr>
<td width="10" colspan="4">&nbsp;</td>
</tr>
<tr>
<td width="10"><img src="/images/pixi_clear.gif" width="1" height="20" hspace="0" vspace="0"></td>
<td><h1>PIO Links</h1></td>
<td width="10">&nbsp;</td>
</tr>

<tr>
<td width="10">&nbsp;</td>
<td class="sidelinks"><a href="calendar.asp" class="sidelinks">Calendar</a></td>
<td width="10">&nbsp;</td>
</tr>

<tr>
<td width="10">&nbsp;</td>
<td class="sidelinks"><a href="headstart.asp" class="sidelinks">Headstart</a></td>
<td width="10">&nbsp;</td>
</tr>

<tr>
<td width="10">&nbsp;</td>
<td class="sidelinks"><a href="publicOutreach.asp" class="sidelinks">Public Outreach</a></td>
<td width="10">&nbsp;</td>
</tr>

<tr>
<td width="10">&nbsp;</td>
<td class="sidelinks"><a href="webRequest.asp" class="sidelinks">Website Change Request Form</a></td>
<td width="10">&nbsp;</td>
</tr>

</table>
<!-- /links -->
<!-- /links -->
</td></tr></table>

I would greatly appreciate any assistance.
Thanks,
dcmcwhorter

[Moby_Dim]

background-position:top left; may be

Welcome to WebmasterWorld.

[encyclo]

Welcome to WebmasterWorld dcmcwhorter!

One potential issue you have is that you are defining the background image on both the

td

and the link anchor:

 <td [b]class="sidelinks"[/b]><a href="webRequest.asp" [b]class="sidelinks"[/b]>

Do you need to define the

class

on the anchor too?

[dcmcwhorter]

Thanks so much for the welcome!

background-position:top left; made it happen on all of the links, not just the long one.

I took the class off of the anchor tag (I thought I needed it on both since I am running some JS to determine the current page and change the class for that element). I needed to add style="padding-left: 10px;" to the <TD> and that seems to work.

Sometimes it's so simple and you have been working on things for so long you lose sight. Thank you both so much for your assistance!

-dcmcwhorter

[dcmcwhorter]

ARGH!

I am still having the same issue...when my class is the selected class, I still get a repeating background image. Now it is happening in both IE and Firefox!

Here are the two classes, and a sample of my <TD>

.sidelinks {
background-image: url(images/navBulletNew.gif);
background-repeat: no-repeat;
background-position:top;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
font-size: 11px;
color: #595eb4;
}
.sidelinksSel {
background-image: url(images/navBulletSelNew.gif);
background-repeat: no-repeat;
background-position:top;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #333366;
text-decoration:none;
}

<tr>
<td width="10">&nbsp;</td>
<td class="sidelinksSel" style="padding-left:10px;"><a href="#">Infrastructure Technology Center</a></td>
<td width="10">&nbsp;</td>
</tr>

Again, I would appreciate any help!
-dcmcwhorter

[dcmcwhorter]

I added the following to both classes:

height:10px;
position:relative;

The height attribute took care of it in IE, the position attribute took care of FF.

I hope I don't run into this problem later!