Note that the only difference is the background color vs. image. When I use a background image, the div defaults to a grey color. I have tried using a semi-transparent .gif file as well with the same results, it seems that something in the script doesn't like transparencies.
View Comments
This CSS works;
.main_content {
position: absolute;
text-align: left;
padding-right: 10px;
padding-left: 10px;
background-color: white;
height: 420px;
width: 540px;
top: 90px;
left: 390px;
border: 1px solid #666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 6px #666;
-webkit-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
behavior: url(ie-css3.htc);
overflow: auto;
}
This one doesn't;
.main_content {
position: absolute;
text-align: left;
padding-right: 10px;
padding-left: 10px;
background-image: url(images/left_content_bg.png);
height: 420px;
width: 540px;
top: 90px;
left: 390px;
border: 1px solid #666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 6px #666;
-webkit-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
behavior: url(ie-css3.htc);
overflow: auto;
}
Note that the only difference is the background color vs. image. When I use a background image, the div defaults to a grey color. I have tried using a semi-transparent .gif file as well with the same results, it seems that something in the script doesn't like transparencies.
Any ideas?