tab/menu CSS not working

its either the left or the right not both

[GeddyLeeRocks]

Hello All
I have a CSS for my tab/menu. For some reason it can't place both left and right at the same time. Its either the left or the right.

#topMenuTab {
background: url("../images/menuTabLeft.jpg") left top no-repeat;
background: url("../images/menuTabRight.jpg") right top no-repeat;
background-color:#4c7d67;
}

<td width="175" height="30" id="topMenuTab">Sign up for the newsletter</td>

Any ideas?

[bedlam]

Yep. You can only have one background image per element. In your sample css, the second 'background' declaration simply overrides the first (since the two are of equal specificity).

If you're trying to achieve something like rounded corners on both side of an element of unpredicatble width, you should probably do something like use a list to mark up the menu [google.com] and put one side's background image on the <li>, and the other on the <a> (or, in the case of the example markup you posted, put one part of the background on the <td> and the other part on the <a>). Google css + "sliding doors" [google.com] for more information on this technique.

-B

[D_Blackwell]

Only one background-image per container is allowed. But you have some work around options.

[webmasterworld.com ]

With the width of the container fixed at 175px you might opt to put it all in one image fixed to that width.