Cannot show picture from database in IE 8 - css

Question

When browsing the pages of my display cart list and pictures with IE 8 , cannot show pictures ( .jpeg) and shadow effect. but other browser wroks fine..
The pictures are thumbnails that obtained from the photo album ,linked by url,
The below is my CSS.
body {
font-family:Helvetica-light;
font-size:14px;
padding:0;
margin:0;}
h1 {
font-weight:normal;
margin:0 0 10px 0;
}
h2, h3, h4, h5, h6 {
font-weight:normal;
}
a {
text-decoration:none;
color:#777;
display:block;
margin:0 0 10px 0;
}
a:hover {
text-decoration:underline;
}
:focus {outline:none;}
label { display:block; margin:0 0 5px 0;}
input {
display:block;
margin:0 0 5px 0;
}
input[type=submit] {
cursor:pointer;
}
table {
width:100%;
box-shadow:0 0 5px #CCC;
-webkit-box-shadow:0 0 5px #CCC;
-moz-box-shadow:0 0 5px #CCC;
-o-box-shadow:0 0 5px #CCC;
behavior: url(ie-css3.htc);
margin:0 0 10px 0;
}
table tr th {
text-align:left;
font-weight:bold;
padding:10px;
background:#F9F9F9;
}
table tr td {
padding:10px;
}
table tr.empty td {
background:#F9F9F9;
}
.clear { clear:both;}
.bold { font-weight:bold;}
#container {
width:960px;
margin:0 auto;
padding:20px;
box-shadow:0 0 10px #CCC;
-webkit-box-shadow:0 0 10px #CCC;
-moz-box-shadow:0 0 10px #CCC;
-o-box-shadow:0 0 10px #CCC;
behavior: url(ie-css3.htc);
}
.notify {
padding:10px;
background:#E9E9E9;
margin:0 0 10px 0;
}
.product {
float:left;
margin:0 10px 0 0;
box-shadow:0 0 10px #CCC;
-webkit-box-shadow:0 0 5px #CCC;
-moz-box-shadow:0 0 5px #CCC;
-o-box-shadow:0 0 5px #CCC;
behavior: url(ie-css3.htc);
}
.url{
behavior: url(ie-css3.htc);
}
.product .info {
float:left;
padding:10px;}
.product h3 {
margin:0 0 5px 0;
background:#F9F9F9;
padding:10px;
}

Answer 1

behavior: url(ie-css3.htc); does not use the same path structure as background-image: url();
This will not look in the directory your CSS lives in, but rather the docroot of your site. Be sure that this file is accessible from http://yourwebsite.com/ie-css3.htc
Also, I would change the order of your box-shadow CSS declarations like follows:
-webkit-box-shadow:0 0 10px #CCC;
-moz-box-shadow:0 0 10px #CCC;
-o-box-shadow:0 0 10px #CCC;
box-shadow:0 0 10px #CCC; /* This was moved to the bottom */
Since CSS "cascades", a browser that supports box-shadow but keeps -webkit-box-shadow around for legacy reasons would use the non-standard -webkit-box-shadow in how your code was laid out. By moving box-shadow to the bottom, we ensure that browsers who support the standard will use it.