CODEWITHSUNDEEP
css
Mike Ozark
Mike Ozark

Reputation: 109

CSS backgroung color is differnt in IE vs FF

In FF it works like intended (puts light transparent ribbon on the bottom of the image for caption). But in IE it's totally black (caption does show)

.caption {
    z-index:30;
    position:absolute;
    bottom:-35px;
    left:0;
    height:30px;
    padding:5px 20px 0 20px;
    background:#000;
    background:rgba(0,0,0,.5);  
    width:300px;
    font-size:1.0em;
    line-height:1.33;
    color:#fff;
    border-top:1px solid #000;
    text-shadow:none;
}

Upvotes: 0

Views: 161

Answers (4)

Josh
Josh

Reputation: 431

Any version of IE before 9 does not support rgba() therefore its picking up the other background as a fall back. This article may help you: http://dimox.net/cross-browser-rgba-support/

Here is a plausible solution: http://css-tricks.com/2151-rgba-browser-support/

Upvotes: 1

djlumley
djlumley

Reputation: 2967

That's because the version if IE you're testing on (assume it's 7 or 8) is using this value background:#000; rather then background:rgba(0,0,0,.5); because it doesn't support rgba and is seeing it as an invalid value therefore it's not being assigned.

edit: It's worth noting that assigning the background-color in this fashion means that on older browsers where rgba isn't supported (notably IE 6,7, and 8) you have a fallback colour.

Upvotes: 1

Zakman411
Zakman411

Reputation: 1764

Just my opinion, but I would recommend using 'background-color' attribute instead of 'background.' That could be an issue

Upvotes: 0

ProNeticas
ProNeticas

Reputation: 996

Technically it should not work in either, the second would take precedence. Can you try to remove "background:#000;" and see if that works?

You can also try JQUERY to get the effect that you want. http://iamnotagoodartist.com/how-to/semi-transparent-mockup-overlays-with-css-jquery-ui/

Upvotes: 0

Related Questions