Mark Janssen

Seen this many times, and unfortunately without knowing how to fix it. 

There are two causes of this problem:

The first problem is that Internet Explorer almost never displays the
colours you tell it to (in much the same way as Netscape 4 never makes a
frame the size you tell it to), even with truecolor displays. Instead it
dithers colours to approximate their value, and it never gets it quite
right. If the background color was one of Internet Explorer's native
colors, like pure white for example, you would not see any problem.

The second problem is that PNG graphics contain gamma correction 
information, and Internet Explorer abuses that information. It applies it
even to transparent parts of the image, and of course, it does not apply
it to the background image, so you see a mismatch. Good browsers like
Opera, Gecko and KHTML do this properly.

As for your particular example though, you are doing something a little
odd (although fixing what you have done still does not fix the colour
shade problem):
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='04.jpg');
Why are you loading a jpg image with the alpha image loader? There is no
need to use the alpha loader trick with a jpg image - it has no alpha
anyway!

What I suggest you do is create the whole background using segments 
of jpg images, then overlay JUST the words as an alpha png image over the
top of the jpg background. That way, the alpha works just fine. Would this
do what you need?

Tarquin

I get what you are doing. Nice effect by the way.

Can you remove gamma correction using photoshop? or set it to 1 for all
colour chanels (so saying no correction)?

If not, I cannot see any easy way to do what you want if you use jpegs.
You could use GIFs (ask me how to if you want ...), but I think that will
make a much bigger file size again, so you might as well use pngs.

What happens if you decrease the number of colours to 256? does the 
image still look ok, and does the file size as a png become acceptible? I
think the transparent parts would still need to be full colour, as
otherwise you can't use alpha.

You could still put the words over the top as a transparent png if you
want more colours ...

As a separate point, you are going to have problems with jpegs anyway,
because the artifacts of lossy compression become visible along the edges.
Normally this does not matter because people don't use much compression,
and they don't split images into pieces. Because you are splitting the
image into pieces then putting them beside each other, people will be able
to see the edges of the images.

I have another idea. Could you put a transparent png (use binary 
transparency - and try stretching a 1px by 1px 2 colour png) over the top
of the jpegs. Does the gamma correction from the png affect the underlying
jpegs?

> Do you see any edges?

Only because I am looking for them ;)

I can see the line between the two jpegs, but I suppose normal viewers
won't even notice ... Photoshop has got some pretty good compression
algorithms!

> > I have another idea. Could you put a transparent png over the
> > top of the jpegs.

> How can I do so?

You need to do this, not me, because I don't have photoshop, or your
personal gamma correction.

Create a new png image 1px by 1px. Decrease the number of colours to two
(these will usually default to black and white). Assuming the image is
currently white, set the colour white to be transparent (like you would
with a GIF image - if you have any problems with this, create a GIF image
and make it transparent, then re-save it as a png). Save the image without
any alpha.

Now put that image in a positioned element, over the top of the jpeg
image, and make its height and width attributes the same as the jpeg
image. As it is transparent, other browsers will simply show the jpeg
image through it, IE just might apply the gamma correction and fix it's
own problem, but I don't suspect that this will work very well. But it is
worth trying just in case it does work.

OK, I have another idea:

As internet explorer is the only one getting it wrong, why not prepare
special pngs for IE that are brightened just the right amount so that they
match the jpegs. You can then use these in the alpha image loaders instead
of the normal alpha images.

hehe. - might work

would mean a bit more for it to download though, but it is misbehaving, so
I don't care!

> But hey, as you can see on my screenshot, it makes the JPEG
> lighter and not the PNG darker, so something is wrong with the
> JPEG. Is there any gamma correction for JPEGs?

The JPEG format does not support gamma correction. This is just 
because IE approximates colours (surprise: IE is not perfect ... ;)

The alpha image loader may be getting things right because it is a 
directx plugin, not the IE core renderer.

> > Now put that image in a positioned element, over the top of the jpeg 

> And...what is the html for it?!?

<div style="position: absolute; right: 0; top: 0; z-index: 2;">
<img src="fix.png" width="668" height="155">
</div>

This would cover the first image, you would need to 
do the same again with the second (top, height and 
width adjusted of course).

> I could also replace the JPEGs by PNGs, for IE?

yes, this script would work (put it just before the </body> tag):
<!--[if gte IE 5.5]>
<script>
for(var x=0;document.images[x];x++){
var im = document.images[x];
if(im.src.match(/0[24]\.jpg$/)) {
im.src=im.src.replace(/\.jpg/,'.png');
} }
</script>
<![endif]-->

with any luck, this script would also abort the 
loading of the unrequired images, so they would 
only have to load the pngs, not the jpegs as well.

I'm still working on your script for you - give me 
a while.

I have attached your script with loads of updates. read my comments in the
script file; they will tell you how to fix the problem.

You should run either one or the other, not both.
[Ed. Wrong! both were needed - corrected later]
Just remember that one
replaces the jpegs with regular PNGs (the one that runs just before the
</body> tag), and the other loads PNGs with alpha (the external script
file you sent). As those particular PNGs don't need alpha, either will
work properly.

Oh cr*p. I've just realised how they do that alpha opacity. It works on
any absolutely positioned element, but works on normal elements too, if
they have width and height explicitly set. Sh*t! I'm going to have to
update my alpha page.

> So...does the script have to be edited/optimized?

no, both scripts should work as they are (of yourse, your page needs to
use [if gte ie5.5] not [if gte 75.000] ... ;)

Ok, my mistake;
var imgStyle += img.style.cssText
should be
var imgStyle = img.style.cssText

> how can I use opacity in opera?

with difficulty. You cannot make the whole menu div transparent, 
because Opera does not support any kind of alpha on arbirary 
elements, only on images.

To do the effect you want, use an alpha transparent image on the 
background of the menu divs. You can also use the alpha loader for IE.

As for using both scripts, yes, they need to be merged, but they need to
be merged carefully. I have attached a version that will also convert the
jpgs into a loaded png (you need to create those pngs).


As a different but very important note, the way you have structured your
page is very poor. I assume you were going to do this later, but I will
give you some pointers. It only works at certain resolutions. This is
because the images are all in a single line, and they rely on the page
size to force linebreaks at the right times. I suggest this structure:

<div>
<nobr><img ...><img src="blah.jpg"></nobr><br>
<nobr><img ...><img src="blah.jpg"></nobr><br>
<nobr><img ...><img ...></nobr>
</div>

> OK thanks...but it still doesn't work.

Dude, your page works here ... ;)
IE 5.5

> > To do the effect you want, use an alpha transparent image on the
> > background of the menu divs. You can also use the alpha loader for IE.

> How can I use the alpha loader for background images?!

<style>
div.menu { background-image: url(blah.png); }
</style>
<!--[if gte ie5.5]>
<style>
/* be more specific here to override the other one */
body div.menu { background-image: none;
  /* line truncated for email, you need to put in the full line */
  filter:progid:DXI.......AlphaImageLoader(src='varyAlpha.png');
}
</style>
<[endif]-->

> > <nobr><img ...><img src="blah.jpg"></nobr><br>

> How can I get that valid XHTML 1.1?

img tags must become:
<img src="" ... />
<br> tags must become
<br />

nobr is NOT valid HTML or XHTML. use <span style="white-space:nowrap;">

> I know about the poor coding, but I don't want to use tables!
> Do you know why divs with a negative z-index aren't rendered?

What I gave you will not need tables. The nowrap and BRs force table-like
response.

Negative z-index should not be possible, but browsers may interpret it as
0, in which case other things may be stacked in front of it, OR, browsers
may incorrectly accept the negative value, and put it behind the document
(which is at z-index: 0;) so it would be invisible.

> Look at the shot.

ok, your browser is having problems, cos I just tried it again in IE5.5,
and it works just fine.
If you set tools - internet options - advanced - 'display a notification
about every script error'
do you get any errors when you load the page?

I saw that you removed the conditional comment, so Mozilla would give 
an error. As for IE, I have no idea why it is not working. sorry. Mine 
works, ao I assume you have a problem with your installation (I may be 
wrong though ...)

> Could you give me a screenshot of your IE?

attached

> And, is there any method in IE to list the images on a page?

Not for what you want. You can use script to show what images are on 
the page by saving the script as a javascript bookmarklet, but as your 
images have been turned into spans, that will show nothing.

try this instead:

once the page has loaded (or failed to load in your case), type the 
following into the address field and press enter:
javascript:alert(document.body.innerHTML)

This will tell you the HTML that your page body is now constructed 
using. It should contain all of the spans that have been created.

OK, your's is screwed.

it should at least alert '<div style="blah"></div>'

Honestly not sure how to do anything more with it. Looks like a browser 
bug.

> How can I make a fade-effect in opera? I think I can't right?

Opera cannot do fade-ins, because it doesn't support opacity
....
but
....
There is a trick you can use with alpha for background fades;
create a PNG with an alpha fade, fully opaque on the left, fully 
transparent on the right. Set that image as the background for a div, at 
position 0,0, no-repeat. Now, use JavaScript to move the background 
position slowly left. Whatever is behind the div will slowly fade into view. 

To be honest though, there are very few places where this effect would 
be of any use, but it's nice to know that it is possible ...

Note also that Safari (1.1 on OS X 10.3+) can also do fade-ins, using a 
slightly messy syntax (note, alpha filter must have been set INLINE):

function setAlpha(oV,oID) {
var oD = document.getElementById(oID);
// IE
if( oD.filters ) { oD.filters.alpha.opacity = oV * 100; }
// Mozilla Gecko
oD.style.MozOpacity = oV;
// Safari 1.1
if( oD.style.setProperty ) { oD.style.setProperty('-khtml-opacity',''+oV+'',null); }
// and just in case anyone starts supporting it ...
oD.style.opacity = oV;
}

You can fade only a background, not the text on it, so fading from one set
of text to another is virtually impossible. You can fade one div (including
its text) to blank, then from blank to the other div, but not directly from
one div to the other.

> In fact you can crossfade:
> fade out one, and start fading in the other one at the same time

not in Opera. You would have to fade one out, then hide the upper div of
text, then fade the new one in.
 
> What about making a div cover the whole document, with an alpha png
> as background?..how can I?

create a png image, that is stupidly wide (10'000 pixels wide should be
ok) but only 1 pixel high.
make the left 2000 pixels fully transparent
make the right 2000 pixels fully opaque
fade the pixels in between from fully transparent on the left to fully
opaque on the right

use
<div id="myDiv" style="
visibility: hidden;
background: transparent url(myPNG.png) repeat-y scroll 0 0;
">

then do this:

function doFade() {
var theDiv = document.getElementById('myDiv');
theDiv.style.visibility = 'visible';
window.posNow = 0;
window.fdDv = setInterval('mvBG();',50);
}
function mvBG() {
var theDiv = document.getElementById('myDiv');
theDiv.style.backgroundPosition = '0px '+posNow+'px';
if( posNow == 8000 ) {
  clearInterval(fdDv);
}
posNow+=100;
}

I just tried it. Opera refuses to apply the alpha background properly. It
works in Mozilla, so I know it's right, it's just that Opera will not
correctly apply alpha to a background like that.

So, I tried another idea (not a very good one ... but it works, even if it
is a bit ugly - it probably is not good enough for what you need). Put the
upper content in a hidden div, with a transparent background. Put the
lower content as part of the main page. It must be _ALL_ the same color,
which is why I don't think it is much good.

When you want to fade, make the upper div visible. Now fade the body
background color to match the color of the text of the lower content (the
upper content color must strongly contrast). Honestly, the effect is not
very good, it just illustrates a point.

I suggest you don't bother fading in Opera!

I have attached two scripts - one that does the fade properly, but not in
Opera (reverts to simple showing and hiding), and one that does the fade
(very) badly, but works in Opera.

Note that to achieve total body coverage, you need 100% height, 100%
width, and this has its own problems, see:
http://www.quirksmode.org/index.html?/css/100percheight.html

OK, there are two reasons for this.

1) you are using a 1px * 1px image, but you are applying it to a very large
area. AlphaImageLoader does not tile, so you need to stretch the image to
cover the entire DIV background:
AlphaImageLoader(src='070.png',sizingMethod='scale');

2) Internet Explorer will not apply AlphaImageLoader if the element also
has the Alpha filter. Of course, to produce the fade effect, the div needs
to have alpha. The solution is to apply the AlphaImageLoader to an internal
DIV (it _must_ also have height: 100%; width: 100%;):

<div style="...Alpha(blah); etc.">
<div style="...AlphaImageLoader(blah); etc.">
 Contents
</div></div>

Note that also, the contents of the div will be made as transparent as the
alpha image. Strange idea Microsoft ...

By the way, you should be more specific when removing the background image
in the [if gte IE5.5]:
body #myDiv { background-image: none; }

Mark,

Hey, long time, no contact :)

> I'm bought a new iMac G5 two weeks ago and am having some problems with
> colour reproduction between HTML/CSS and images in Safari. Images seem
> lighter or darker than their CSS counterparts.

Safari and Mac in general use Gamma correction a lot differently to other
programs. Gamma correction is only useful when _everything_ gets corrected
the same way. With Safari, the images are "corrected", since Safari uses the
OS to render them, but the CSS does not.

The worst offender (but the easiest to correct) is PNG. Download the
TweakPNG (Windows) program that people usually use to set a sensible PNG
background colour for IE, and remove the gAMA chunk (or set the gama to the
default value; 1):
http://entropymine.com/jason/tweakpng/
Apparently you can also use PNGCrush to remove the gamma chunk, using
something like:
pngcrush -rem gAMA infile.png outfile.png

The images should in theory not be subject to gamma correction any more. You
may still find that Safari messes with image gamma anyway, since it is a
Mac, after all. You can tweak your own monitor's gamma settings using the
Mac calibration tools:

Apple menu - System Preferences - Displays - then choose to calibrate your
monitor.

This page has a very good description of the problems in various browsers,
and how to work around them:
http://hsivonen.iki.fi/png-gamma/


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Mark,

> But the problem is: why does Firefox/Opera have a totally different
> behaviour?

Not entirely sure, I guess their handling of gamma is different (or non
existent). This sort of thing goes a little over my head, I'm afraid. To my
memory, Opera and Firefox will only apply gamma correction to PNGs that have
a gAMA chunk, and Safari applies it to everything. But I really don't know
I'm afraid. I can only suggest searching to see if anyone has done any
research articles about this.