CODEWITHSUNDEEP
cssinternet-explorer-9
ProDraz
ProDraz

Reputation: 1281

IE9 rounded corners and transparent background issues

I have searched a lot, but I can't really find an answer to this.

I have rounder borders all over, everywhere it's fine, except on the elements which are using img as background (image get nice rounded corners, but behind is some sort of black background).

PICTURE for easier understanding of the issue:

I'm really stuck on this. Any suggestions is this IE issue or am I missing something?

CSS of gray header is something like this:

#header {
    background-image: url("images/bg-header.png");
    background-repeat: repeat-x;
    border-radius: 4px 4px 0 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    height: 46px;
    line-height: 46px;
    padding: 0 0 0 15px;
    text-shadow: 0 -1px 0 #332829;
    width: 575px;
}

FIDDLE:

http://jsfiddle.net/2BnDR/2/

Upvotes: 0

Views: 1176

Answers (2)

ProDraz
ProDraz

Reputation: 1281

I've figured that IE9 does wierd black background arround element and bugs like you can see on the print screen above. When you have box-shadow or text-shadow + filter on same element.

I've deleted all filters out of my CSS and it works as charm.

Eg.

.header {
    filter: dropshadow(color=#3e3132, offx=0, offy=-1); /* delete this one and it works */
    text-shadow: 0px -1px 0px #3e3132;
}

Upvotes: 1

DJ_Plus
DJ_Plus

Reputation: 181

try this maybe:

#DivThatImageIsIn img{
  border-radius: same as div;
}

Upvotes: 1

Related Questions