Follow this Blog!

Oct 2, 2013

f Comment

Strange Non-CSS Related Issue with an Image Surrounded by Thin White Borders!

Amazon If an image is rendered in a modern web browser with a strange white border around it it could be CSS related problem or non-CSS related problem.

If it is CSS related problem you can find a lot of solutions on the web teaching you to fix the issue by fixing border related CSS styles and properties such as the border-width property.

If it is a non-CSS related problem, read on to find a solution that worked for me.

What happened?

One day I downloaded the photos from my friend's website so I could redesign his site. I used Paint.NET to remove the background by making the background transparent. Then I saved the updated photos. When I put those images in an HTML file and render that HTML file in a web browser I noticed a strange thin, white border rendered around each image, as if that image had border: 1px solid white CSS style applied to it.

This strange behavior occurred in all modern browsers including IE, Firefox, and Chrome.


It turns out the problem is the image itself, not the CSS. Follow the following simple solutions.

If it's a JPG image or a JPEG image, open the JPG image with Microsoft Paint and save again.

If it's a PNG image, open the PNG image with Paint.NET and save it as a PNG image with 8-bit depth.

Hope it works for you. If not let me know!

Paint.NET is a free program.

If you have any questions let me know and I will do my best to help you!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael