I have this small site that I'm developing for a friend. My problem is that elements are disappearing in ie, even the version 9. The elements that are disappearing are within another element that's been floated. Screenshots of the pages are below. The first screenshot is how the page looks like in Chrome, Opera, Maxthon, Rockmelt, and Firefox. The second is how the page looks like in IE9. I have switched to all DOCTYPEs but nothing seems to be working.
The html looks like this.
<div class = "my_prod">
<div class = "prod_pic"><!--product picture here--><div>
<div class = "">
<a href ="#" class = "add"></a>
<a href ="#" class = "prod_tag"></a>
</div>
</div>
CSS for the floated element is
.my_prod
{
width: 17.7%;
margin: 5px 1.1%;
height: 200px;
float: left;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
and the css for the disappearing element is
.prod_tag
{
padding: 0px 5px 0px 5px;
border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
font-weight: bolder;
border-style: inset outset outset inset;
border-width: 0px;
text-decoration: none;
color: #FFF;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#8A0A01), to(#222));
background: -moz-linear-gradient(top, #8A0A01, #222);
background: -o-linear-gradient(top, #8A0A01, #222);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A0A01', endColorstr='#222222');
}
.add
{
padding: 2px 5px;
border-radius: 7px 0px 0px 7px;
-webkit-border-radius: 7px 0px 0px 7px;
-moz-border-radius: 7px 0px 0px 7px;
font-weight: bolder;
border-style: inset outset outset inset;
border-width: 0px;
text-decoration: none;
color: #FFF;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#0381C7), to(#222));
background: -moz-linear-gradient(top, #0381C7, #222);
background: -o-linear-gradient(top, #0381C7, #222);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0381C7', endColorstr='#222222');
}