CSS backgroung color is differnt in IE vs FF

Question

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;
}

Use background-color instead. Also, you have two background attributes — Zakman411, Jun 22 '11 at 23:50

djlumley · Answer 1 · 2011-06-22T23:57:38.837

1

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.

edited Jun 22 '11 at 23:57

answered Jun 22 '11 at 23:50

djlumley

2,955
2
24
30

Assuming IE7/8, you're correct. See: http://stackoverflow.com/questions/6446795/how-to-keep-text-opacity-100-when-its-parent-container-is-having-opacity-of-50/6446955#6446955 – thirtydot Jun 22 '11 at 23:53
1

@Mike Ozark: [IE9 supports `rgba`.](http://caniuse.com/css3-colors) Your page must not be in IE9 Standards Mode for whatever reason. Hit F12 to bring up the Developer Tools - what does it say? – thirtydot Jun 22 '11 at 23:59
I thought it perhaps might be a syntax error and IE 9 might require 0.5 rather then .5 but that's not the case. Check through the rest of your CSS and see if you're overriding it in an IE specific manner somehow. edit - reading your comment to ProNeticas, it sounds like thirtydot may be right. – djlumley Jun 23 '11 at 00:00

Josh · Accepted Answer · 2011-06-23T00:05:52.453

1

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/

edited Jun 23 '11 at 00:05

answered Jun 22 '11 at 23:58

Josh

431
4
12

I used this and seems to be working in IE and also does not mess up FF. However, what it the HEX for rgba(0,0,00.5) – Mike Ozark Jun 23 '11 at 00:14
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFCC00,endColorstr=#7FFFCC00); what is this 8 digit hex? – Mike Ozark Jun 23 '11 at 00:21
If I understand you, the hex value should be something like #AA000000 - AA is the alpha value, you may have to play with those values to get what you want. – Josh Jun 23 '11 at 00:31

score 0 · Answer 3 · answered Jun 22 '11 at 23:48

0

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/

answered Jun 22 '11 at 23:48

ProNeticas

986
3
10
17

I took out the whole background:#000. FF is behaving by transparent-ing (like i intended). IE has clear background now. – Mike Ozark Jun 22 '11 at 23:58

score 0 · Answer 4 · answered Jun 22 '11 at 23:54

0

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

answered Jun 22 '11 at 23:54

Zakman411

1,764
3
22
45

That won't make any difference. – thirtydot Jun 22 '11 at 23:57
I tried background-color:rgba(0,0,0,.5); FF is good, IE is clear – Mike Ozark Jun 23 '11 at 00:08

CSS backgroung color is differnt in IE vs FF

4 Answers4