rounded corners - images randomly showing up in the wrong places
 

Hi,

I've encountered a strange problem while trying to implement rounded corners into my templates. I've added rounded corners to my menus and was going to add them to other parts of my site, when I noticed that in different parts of the site, the top right corner image is popping up randomly.
Here is an example...the pink arrows show where the images are popping up(I know there are other issues in this screen capture...I'm just concerned about the corner image at the moment):
http://207.126.57.41/images/screencap.jpg

You can view the site at: http://207.126.57.41
I only have two products on the site, in the polos section...so if you want to see this happening, you can go ahead and add one of those shirts to the cart. It's not a live site, so feel free to place an order, etc.

I am using the css mod from cart lab, so I'm trying to accomplish the rounded corners using divs and css. I can't seem to locate any one template in webmaster mode that could be the source of the problem.

Does anyone have a clue as to what could be the problem here?

Re: rounded corners - images randomly showing up in the wrong places
 

Tough to know without knowing how it is coded.

Re: rounded corners - images randomly showing up in the wrong places
 

Well, here is the code from menu.tpl:
<div class="menu_container">
<div class="bl_menu">
<div class="br_menu">
<div class="tl_menu">
<div class="tr_menu">

{*if $dingbats ne ''}<IMG src="{$ImagesDir}/{$dingbats}" {if $dingbats eq "spacer.gif"}height="21" width="1"{/if} border="0" align="absmiddle">{/if*}
<div class="menu_title">{$menu_title}</div>
<div class="VertMenuItems">{$menu_content}</div>

</div>
</div>
</div>
</div>
</div>
<div class="clear_menu">&nbsp;</div>


Here is the code from my css file which governs the rounded corners:

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
MENUS
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.menu_container{margin-bottom: -30px;}
.menu_title{
font-size: 15px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#6d943b;
}
#menu_content_inside {
padding: 5px;
margin: 0px 3px 3px 3px;

}
#menu_content_inside:link {
text-decoration:none;
padding: 5px;
margin: 0px 3px 3px 3px;

}
.bl_menu {
background: url(images/round3.jpg) 0 100% no-repeat #ffffff;
width: 150px;}
.br_menu {background: url(images/round4.jpg) 100% 100% no-repeat}
.tl_menu {background: url(images/round1.jpg) 0 0 no-repeat}
.tr_menu {background: url(images/round2.jpg) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}


I only have the rounded corners applied to the menu.tpl at the moment, so I'm not sure how those images are getting applied to other areas of the site.