0

I am using jquery.reveals.js plugin.
the following colors specified in css

#fff 
#000

are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above) The corner of reveal box showing faint dark and more dark

however I am getting some unexpected result with IE8 The corner of reveal box without proper colors

I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8

veer7
  • 20,074
  • 9
  • 46
  • 74
  • Isn't the latter expected, when you're given `#FFF` and `#000`? – Waleed Khan Aug 03 '12 at 13:58
  • I uploaded two images here. Unable to see them on submitting my question. – veer7 Aug 03 '12 at 13:58
  • @arxanas: no expecting the first output. – veer7 Aug 03 '12 at 13:59
  • Why would you expect the first, if you haven't specified any transparency, etc.? The only colors are `#FFF` and `#000`, yet you get a light gray. – Waleed Khan Aug 03 '12 at 14:00
  • 1
    the problem is not in color, but in transparency setting – Zoltan Toth Aug 03 '12 at 14:01
  • 2
    I am pretty sure this is an issue with IE8 and its handling of transparency. This question may be helpful to you: http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8 – Josh Mein Aug 03 '12 at 14:02
  • this ic the css .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,.4); z-index: 100; display: none; top: 0; left: 0; } it also has opacity specified as .4 – veer7 Aug 03 '12 at 14:13
  • I tried to make use of `filter:alpha(opacity=40);` but even this one failed. – veer7 Aug 03 '12 at 14:23
  • Have you considered using the [jquery UI modal dialog](http://jqueryui.com/demos/dialog/)? It is really simple to use and since it is a part of the the jquery UI, you know it will continue to be supported. – Josh Mein Aug 03 '12 at 14:29

6 Answers6

1

Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??

Andy
  • 14,427
  • 3
  • 52
  • 76
  • 1
    .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,.4); z-index: 100; display: none; top: 0; left: 0; } there is the opacity of 0.4 – veer7 Aug 03 '12 at 14:12
  • There we go then, @veer7, make the opacity work in IE, or remove it completely to fix the problem – Andy Aug 03 '12 at 14:13
0

Specify the color in six characters, or perhaps better yet specify the color as an rgba value.

Matti Lyra
  • 12,828
  • 8
  • 49
  • 67
  • The css is provided by jquery.reveals plugin. What six character colors could be used to get the effect as in result1 (snapshot1) – veer7 Aug 03 '12 at 14:06
0

It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.

Try disabling animation with

 $(...).reveal({ animation: 'none'});
complex857
  • 20,425
  • 6
  • 51
  • 54
0

the colors are displaying properly. I think the problem is with opacity.

Here you can read about CSS Transparency Settings for All Browsers.

Alfred
  • 21,058
  • 61
  • 167
  • 249
0

Try rgba(0,0,0,0.5).

More about RGBA

Nikola K.
  • 7,093
  • 13
  • 31
  • 39
Axente Paul
  • 553
  • 2
  • 8
0

Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.

This link shows you examples of each color value scheme and talks about browser compatibility: http://www.w3schools.com/cssref/css_colors_legal.asp

Daniel
  • 23,129
  • 12
  • 109
  • 154
JimBtek
  • 106
  • 4
  • Welcome to Stack Overflow! Please do not use or cite w3schools. See [this page](http://www.w3fools.com) for reasons and details. – GDP Aug 03 '12 at 22:05