Cross-Browser Compatibility?

[otters]

Okay, what the heck is up with this?

I just finished setting up my dad's new blog and the bugs are driving me nuts.

Opera? Looks fine. When I try to edit, though, I get the dreaded half-the-screen-goes-dark problem, so I don't use it much.
Firefox? Looks fine. No shadows on the text though.
Safari? Ugh. The images are darker than they should be. No shadows.

Am I doing something wrong or is it the internetz?

[乳头的早餐谷物]

Browser compatibility can be a nightmare. That said, the site works fine for me on Firefox, Opera, Safari, IE7, and very nearly IE6 (impressive), on Windows.

[jean-luc]

As far as the images being darker on Safari thing...
Yeah, I've run in to that before. It's because Safari is the only browser that actually supports ICC color profiles for images, so Safari is rendering the image correctly, while all the other browsers aren't. To make it look the same on all browsers, save it without an embedded color profile. This can be easily achieved using the Save for Web function in Photoshop. If you don't use Photoshop, you'll need to look up directions for whatever image editor you use.

Oh, and I like your design. nice work.

You can easily check cross-browser compatability with browsershots - http://browsershots.org/

[Ad]

Browser cross-compatibility nearly destroyed my ICT exam; we made the site for IE6, then got shunted onto IE7-running computers, so it just didn't work. I couldn't finish my project until we were back on the old computers, meaning I missed out on 3 hours of possible work time.

But yeah, compatibility has always been a thorn in my side, and the Browser Shots thing is amazing, I'll use it for evermore. Before, I just manipulated IE Tab.

[smartalco]

This can be easily achieved using the Save for Web function in Photoshop.

Except that only allows you to save as a GIF, which has horrible quality, I generally use PNG for anything more complex then solid colors or single color gradients.

[otters]

Yeah, I've run in to that before. It's because Safari is the only browser that actually supports ICC color profiles for images, so Safari is rendering the image correctly, while all the other browsers aren't.

How does that work exactly? The gray in the image is actually the same hex code, if I use Photoshop's color picker, as the background gray on the blog.

[mattk210]

This can be easily achieved using the Save for Web function in Photoshop.

Except that only allows you to save as a GIF, which has horrible quality, I generally use PNG for anything more complex then solid colors or single color gradients.

you can also get png/jpg with the dropdown box

use png for solid colours, jpg for photos

[otters]

Oh, I just tested that, and Photoshop saves pngs as default without an embedded color profile.

[jean-luc]

Yeah, I've run in to that before. It's because Safari is the only browser that actually supports ICC color profiles for images, so Safari is rendering the image correctly, while all the other browsers aren't.

How does that work exactly? The gray in the image is actually the same hex code, if I use Photoshop's color picker, as the background gray on the blog.

Color profiles specify how the RGB color values should be rendered to real color space (of course, computers can't render true color, so functionally color profiles specify how 8-bit color is rendered to a 16 or 32 bit color monitor)*. Color profiles can be used to ensure that an image is rendered accurately on a variety of machines, and assuming that the video card has been color calibrated, displays and lighting conditions. Photoshop tends to assume you're working with a photograph, in which case you want accurate color replication, so it automatically attaches an ICC color profile to JPG images when you save them. Most browsers don't understand color profiles, so the image is rendered based only on the RGB values. Safari, however, does obey ICC color profiles, so it renders the image 'correctly' according to the profile. this results in the image being colored differently in Safari. Usually the image is darker in Safari, as displays tends to render colors much brighter and harsher than people think they should be.

* A note on color depths: the color depth, or number of bits of color, specifies how many binary bits are assigned to each color channel in a monitor. in 8 bit color, 8 bits (or one byte) are used to express each of the three color channels. This means that each channel is a number between 00000000 and 11111111 in binary, or 0 and 255 in decimal, or 00 and ff in hexadecimal. Although this offers 16,581,375 different color, it's still somewhat limiting. Modern computer displays use 16 or 32 bit color (32 is most common now), which allows for each channel being a value from 0 to 10^31. this allows for 10^93 possible colors. In application, color profiles specify how 8-bit color values are mapped to 32-bit color values. Obviously, this can be done by simple math, but ICC profiles allow an added layer of functionality: they can map values differently depending on the characteristics of the individual graphics adapter, monitor, and light environment. By calibrating your display, you can an ICC profile specific to your setup, so that colors are reproduced accurately. Why are ICC profiles attached to images, then? Devices that capture images, such as CCD arrays on cameras, have the same imperfect color replication that monitors do. ICC profiles can be attached to an image that represent the characteristics of the device that captured the image, so that not only does the image render the same on all monitors, it renders the same as it appears in reality. In practice, ICC profiles are very infrequently used. Very few people calibrate their monitors, and although most prosumer and above level cameras attach ICC profiles to images they take, most people aren't aware of this. real use of ICC profiles is, at this time, typically limited to professional photographers and designers, mostly those that work with print media, as ICC profiles can help to ensure that on-screen colors are close to printed colors.
Hopefully this freakishly long footnote makes sense.

[otters]

Thanks for the footnovel. That helps a bit, thanks. Haha.

Although, if I save my .png without embedded color profile, why does it still look different with Safari?

[jean-luc]

It really shouldn't. but then, Webkit (Safari's rendering engine) seems to be a little odd with images sometimes, even without the excuse of ICC profiles. You might try saving it as a JPG and seeing if that resolves the problem - although JPG is inferior for your use, that may help narrow down the problem.

As a side note, has anyone here ever worked with JPEG2000 (.JP2) images? I'm not sure that I've ever actually seen one in the wild. I think some high-end Canon cameras support the format...

[Tanner]

It really shouldn't. but then, Webkit (Safari's rendering engine) seems to be a little odd with images sometimes, even without the excuse of ICC profiles.

I don't have Google Chrome on this computer but how does the website look in it? I ask because Chrome's based on Webkit as well.

[smartalco]

looks about like this (cuts off the bottom, but I didn't see anything wrong there)

edit: ok, somewhere this screenshot got degraded to .gif quality, the colors looked fine originally though