Why are these lines showing up on my webpage?

October 15, 2007 9:05 AM

I'm creating a very simple web page and inserting images into the cells of a table. However, I can still see faint lines around the borders of the images. What am I doing wrong?

Here
is a link to the section of the page. The blue background color for the table (using Dreamweaver) is 4B8AC9 and the text images created in Photoshop use the same background color . When I just place the table without the images, it previews fine so I guess I've got a mismatch somewhere. However, I can't figure it out.

posted by gfrobe to Technology (11 answers total)

Best answer: The answer a few years ago would have been simple - only use "websafe" colors... but from what I can tell, most browsers and monitors can now display just about anything, and the idea of websafe colors is sort of outdated. (Others may chime in and explain this in much more up to date detail than me.) I bet the problem here is some slight mismatch between your browser, your image editing program, and your video card. The table might look just fine on 78% of other systems besides yours.

The easiest solution at this point would be to make your images with a transparent background. Make the yellow text on blue in Photoshop (or whatever) then use the magic wand selector to just select and remove all the blue of just that one exact color. Then save as GIFs with transparency. That might leave a blue halo around your images, but it doesn't matter, because they'll be on a blue background (the table cell background color). That should solve it.
posted by chr1sb0y at 9:13 AM on October 15, 2007 [1 favorite]

Looks fine to me... no lines
posted by ReiToei at 9:16 AM on October 15, 2007

Can you post a link to one of the images you are using in the web page?
posted by demiurge at 9:18 AM on October 15, 2007

(I'm on a MacBook Pro, plugged into a 22 inch Fujitsu Siemens LCD, at 1680x1050. 60hz refresh... if that helps)
posted by ReiToei at 9:19 AM on October 15, 2007

Are you saving the navigation images out as JPEGs? If so, the lossy compression is altering the colour around the edges; you should be using GIFs instead, as they handle flat colour well.
posted by malevolent at 9:21 AM on October 15, 2007

I see very faint lines in the ss. They look like they are part of the images, though, not an HTML artifact. A look at the source HTML would help.
posted by bricoleur at 9:22 AM on October 15, 2007

umm ReiToei, I can see the lines - its is a jpeg image and you should be able to also.
posted by MonkeySaltedNuts at 9:22 AM on October 15, 2007

I suspect the images are jpg's and that it is a function of the compression that is causing this issue. Use .gifs for images with large color fields and, when possible, make the background color transparent.

preview: or read comment one.
posted by dirtdirt at 9:22 AM on October 15, 2007

chr1sb0y is correct, but I'd like to add one step. When you save your images in Photoshop (save for web), make the matte color 4B8AC9. This will help it to blend the transparency into the background a bit better.
posted by desjardins at 9:30 AM on October 15, 2007

Are you sure that a border isn't being placed on the cells of the table? It looks like that might be the case.
posted by JJ86 at 9:38 AM on October 15, 2007

Response by poster: Chr1sboy's suggestion worked great. I'm back in business!

Thanks all.
posted by gfrobe at 9:44 AM on October 15, 2007