Grow your CSS skills. Land your dream job.

Frustrating Mac vs PC Color issue

  • # July 10, 2009 at 5:54 pm

    Hey guys,

    I’m having a problem with the following site: http://www.levitum.com

    On a Mac the background color of the rounded edges of the two divs in the center don’t match the background color of the entire page, while on Windows it looks perfect and seamless. What gives? I designed and coded the website on a PC btw.

    I encountered this same problem again today (I think it’s the same problem, not sure). I was working on a new website design and was slicing a PSD file. I clicked Save for Web & Devices for one of the images and in the optimization window that pops up, it asks me to choose a preview mode. When I choose Macintosh the images appears as I had designed it (which was on a Mac this time), but when I click on Windows the image overall gets very dark.

    Is this lack of consistency some sort of Color Profile issue?

    BTW: I don’t think it’s a browser issue for the first site. On Windows it looks fine on IE and FF and on the Mac it messes up for both FF and Safari

    # July 10, 2009 at 6:46 pm

    You won’t see the same color on any monitor, anywhere. Every single LCD screen has it’s own color settings (even same models can’t always get it the same).

    Rob
    # July 10, 2009 at 8:02 pm

    You also need to make sure you are using a "websafe" colour – if not, its not guaranteed to show up the same on every browser, so I would just check you are using the same colours and that they are websafe.

    # July 10, 2009 at 10:56 pm
    "TheDoc" wrote:
    You won’t see the same color on any monitor, anywhere. Every single LCD screen has it’s own color settings (even same models can’t always get it the same).

    Yeah but if on the Mac the color in the image is shown differently, shouldn’t the color of the background look different too and thus match up?

    "Robskiwarrior" wrote:
    You also need to make sure you are using a "websafe" colour – if not, its not guaranteed to show up the same on every browser, so I would just check you are using the same colours and that they are websafe.

    Isn’t this for very old browsers, or is this still an issue nowadays? I thought it was the former. The issues described before were on Firefox 3.0 and 3.5 and on XP and leopard all of which I think can handle a hefty chunk of the color spectrum.

    # July 10, 2009 at 11:44 pm

    Figured it out!

    http://hsivonen.iki.fi/png-gamma/

    Rob
    # July 11, 2009 at 1:52 am

    yea websafe still can save the day as some browsers do render non-websafe sometimes a little lighter or darker depending, you can also get banding in a gradient.

    But I’m glad it wasn’t that and you have now sorted it out :)

    # August 3, 2009 at 4:05 pm

    Btw if anyone reading this has the same problem, try this:

    If you’re on the Mac (like I am) download an app called GammaSlamma (http://www.topdownloads.net/mac/gammasl … _2826.html). Then drag your PNG files onto the app icon and it will create another png with "_slammed" affixed to its name. That will be the fixed PNG.

    However if you’re on Windows. Try using an app called TweakPNG. This website shows how to use it at the end of the blog post: http://f6design.com/journal/2006/12/01/ … png-gamma/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".