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 {
  开发者_Python百科  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;
}

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/

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.

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/

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