Fixing Color Discrepancy when Displaying in HTML Browsers

 

Here’s something that can drive you nuts, but has a pretty simple fix.

Often when you create an image in Photoshop (or some other photo editor) and then lay it on a background in an HTML page, the color is just slightly off, and you can see the edge of where the picture meets the background.  Why can’t I get my gradient to fade into the background?!  Why do I see the edge of my image in Firefox?

Gradients in browsers are the worst (for so many reasons).  You think you’ve got it just right and your vignette or fade is going to disappear right into the background… and then it doesn’t.

Used to be when your colors didn’t match up in various web browsers, it was because you weren’t using websafe colors, or you were using jpegs instead of gifs (I’m betraying my age, here), but those day are pretty much gone, so that’s almost never it (though it still doesn’t hurt to start from websafe colors if a specific background hue isn’t ultra-critical; I still use websafe colors whenever I can).

Here’s the solution you’re looking for: chances are, you saved your image with a color profile embedded.  Some browsers obey embedded color profiles, so when interpreting the image, the color at the edge of the image is slightly different than the color you’ve used for your background.  Even though the browser should be showing the exact same color assigned by its hexidecimal number, the colors look different because they are being interpreted through the lens of different color profiles.

Go back to your original image, and when saving the image for the web, be sure you are not embedding a color profile.  For instance, in Photoshop, when using “save for web and devices,” make sure you select “Windows (no color management)” or “Mac (no color management).”

Voila.

…

Green Geeks are My Homies (best hosting service)

For a while I was on Bluehost.com until I realized how “set up for crazy mass production” they are… to a horrible detriment.  As a web designer with many accounts, many e-mail addresses, yadda, yadda, yadda, I seem to raise all kinds of automated red flags within the Bluehost system.  So much so that they actually gave me the boot, even though I NEVER DID ANYTHING WRONG!!!

None of my clients are shady or suspect, and I’ve always paid all my bills, etc., on time.

C’est la vie.  I’ve found greener pastures… literally.

Say hello to GreenGeeks.com.  I LOVE THESE GUYS.

(full disclosure: I get a referral credit when you sign up, but I’m also telling you, “THIS IS WHO I USE FOR MY PERSONAL HOSTING SERVICES”)

Green Geeks is a smallish outfit based out of the Los Angeles area.  There prices and services are EVERY BIT as good as the “top tier” providers.  And best of all, when you call or e-mail support >get this< you talk to a person sitting in GLENDALE!  How crazy is that in this day and age?!  They also make a concerted effort to make “green” decisions, and have been stellar letting me (the client) know any time any adjustments or services are being performed on their servers.  It cracks me up when they let me know that they’ll be doing some sort of maintenance on a server that will take it out of service for 10 minutes at 3:45 in the morning on a Tuesday.  But I love the thoroughness of their communication!

So if you’re looking for the best hosting for your website, I highly recommend GreenGeeks.com!

…

Make a Flash SWF Background Transparent

To make the background of a Flash .swf transparent, simply place two small pieces of code into your HTML.
First you need to insert a parameter setting after the object tag:

<param name=”wmode” value=”transparent” />

Next, you’ll need to insert a little extra code inside the embed src tag.  Place the following after your quality setting:

wmode=”transparent”

Sometimes after you make this change, your webpage may still display improperly until you resave the web page and possibly clear your browser’s cache.
However, the two above pieces of code will definitely make your .swf’s background transparent.