0

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');
}
Attachments ie.png 657.99 KB maxthon-ff-chrome-rockmelt-safari.png 641.14 KB
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Dandello
0

MSIE has developers tools where you can look at the css in each element and experimentally turn them off. Also, does the page validate (even close?) to your doctype? What one browser may pass, another may choke on.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.