Add to cart popup box transparent

Hi there

I’m having an issue with my add to cart popup box in that the background is transparent. I’ve attached a screenshot of what it’s doing. Does anyone have any idea what could be causing this? I’ve tried searching the forum & found a post from 2010 where the z-index of the box was the issue but I’ve got no idea what the box is called as it’s hard to get it with firebug before the popup goes & I’ve tried changing a few that sounded likely but it’s not helped. I’m also not sure if this is even the problem! Any help would be very much appreciated :)



styles.css has all these styles defined for Product Notifications:

/* Product notification /

.product-notification {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

-webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.45);

-moz-box-shadow: 0 4px 15px rgba(0,0,0,0.45);

box-shadow: 0 4px 15px rgba(0,0,0,0.45);


.product-notification .notification-body {

border-right: 1px solid #e3e3e3;

border-left: 1px solid #e3e3e3;

[color=#0000ff] background-color: #fff;[/color]


.product-notification h1 {

-webkit-border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

background: #383838 url(images/picker_title_bg.png) 0 0 repeat-x;

color: #fff;

font: normal 16px Arial, Verdana, sans-serif;

position: relative;


.product-notification h1 span {

position: absolute;

right: 13px;

top: 15px;

width: 19px;

height: 19px;

background: url(images/icons/picker_close.png) 0 0 no-repeat;

cursor: pointer;


.product-notification h1 span:hover {

background-position: 0 -30px;


.product-notification-buttons {

padding: 15px 20px;

border: 1px solid #e3e3e3;

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

background-color: #f5f5f5;

-ms-border-radius: 0 0 5px 5px;


/Product notification */

You should check and see what you are overriding or have changed. The problem is probably in the .product-notification .notification-body class. An example would be that you are calling an image for the background and the path to the image is wrong.

Hi Magpie Don,

I've checked my styles.css against the code you posted and it's exactly the same, all the images I could find are working as well. As far as I'm aware the only thing I changed in css files were a few colours that I checked using firebug before I made the changes and that was long before this problem started. The only addons I'm running are ones that come packed with CS Cart and I don't know anything about overriding files, so it can't be that either.

Could a recent update have caused a clash which has resulted in the problem?

Do you know what creates and runs the cart popup box?

Thank you for any help.

If you are using the mychanges addon, then you might have put a CSS file in there that is taking priority over the .product-notification .notification-body class - when I say overriding, I mean a CSS class that is overriding the default class in the styles.css file. You know, if you have a class in the CSS file twice, the last one to be read will be the one applied.

Turn off CSS caching (if it's on) so you can see the CSS file name and location in Firebug. A quick click on the stylesheet's name in FIrebug should open the stylesheet and take you right to the class being applied - you got about 8 seconds.

It's got to be a CSS problem. I don't know what else it could be.