Hello, My name is JAYME.

Hopefully those of you that have been racking your brains trying to figure out why your colors in a PNG file don’t match those in a GIF or JPG, will find this small article useful. I ran across this problem when trying to use a PNG file to overlay a page background image was another file type such as GIF or JPG when both images needed to represent the same color. Firefox typically renders the images correctly, but I’ve found that IE6 and Safari have problems with it. To deal with the problem you need to remove the Gamma from the PNG file. Fortunately I ran across a program that will remove it for you: pngcrush.

The program can be downloaded for Windows and runs in command line DOS. If you are familiar with command line, just enter the following code (replacing infile and outfile with your file names):

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Refresh your page and watch the colors match :)

If you are creating CSS hover states on an element using the background:url(images/background.jpg); method, you can preload your hover state images without using any javascript whatsoever. If you do a lot of css work, you can tell that when you load a page with this method, the background image on the hover takes a second to load when you hover over it. This can be eliminated very easily. Here’s an example using a div that has a class of button:

<div class=”button”>
<a href=”">my button</a>
</div>

In the css you will need to define with anchor tag definitions as well as the definition for the div element itself:

.button {
width:100px;
height:20px;
padding:5px;
margin:0px;
background:url(images/background-hover.jpg) no-repeat top left;
}

.button a:link, .button a:visited {
display:block;
width:100px;
height:20px;
padding:5px;
margin:0px;
background:url(images/background.jpg) no-repeat top left;
}

.button a:hover, .button a:active {
display:block;
width:100px;
height:20px;
padding:5px;
margin:0px;
background:url(images/background-hover.jpg) no-repeat top left;
}

The key is the highlighted line of code in the div. If you specify the hover state on the div element background, the image will be hidden by the a:link class background image, but it will be loaded when the page is loaded.

I know this doesn’t pertain to anyone reading this except me I’m sure. I’m simply writing this up so I’ll have a reference for later when I encounter the same problem in my wonderful world of css. Nonetheless, if you have a floated element such as a div and you place margin-right or margin-left on that element, our most beloved Internet Explorer 6.0 will double that margin value, causing havoc in your html layout. To fix this simply add display:inline; to your floating element. Bah Boom!

I’ve decided since I’ve had quite a bit of success with SliceMyDesign, I should start a streamlined design service for those that need low-cost web design in a hurry. It’s mainly for people who purchase old websites that want a new look to their site in order to increase traffic. I wanted to tie it in to my current business with the same theme, so I came up with FlipMyDesign. If you know anyone who needs this type of service, send them my way!