Help!

[HeatherD]

I've made a layout for my blog in Photoshop, I have a main banner at the top, then a big box below where my entries will go, and then another box at the side of the blog box where the navigation will go. In between those boxes and the banner is meant to be transparent, I made it transparent in Photoshop but when I view it in IE, the spaces are a light blue colour. How do I make it transparent and not blue?

[jscheuer1]

PLEASE: Include the URL to your problematic webpage that you want help with.

[HeatherD]

Oops, sorry. It's not finished but I've uploaded it so you can see: here.

[jscheuer1]

It is transparent. The color showing through is the body background-color as defined in your style sheet (http://www.geocities.com/heatherxx05/main.css) here:

body
{
background-color: #C2CBCF;
font-family:verdana; 
font-size:10px;
color: #000000;

scrollbar-track-color: #C2CBCF;
scrollbar-face-color: #C2CBCF;
scrollbar-highlight-color: #C2CBCF;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #C2CBCF;
scrollbar-shadow-color: #999999;
scrollbar-arrow-color: #cccccc;
}

If you want it to be white, either change the value to:

#FFFFFF

or, make that area white instead of transparent in the graphic file. Or, did you have something else in mind?

[HeatherD]

Ooh okay. Thanks. How do I get rid of the colour then? I just want it so the purple background comes through?

[jscheuer1]

Ah, my mistake, it was just a coincidence that your css style background color matched the color of that area in your .png layout image. IE does not support the type of transparency used in your layout image (it works as is in Mozilla FF). Try saving it with single color transparency.

[HeatherD]

How do I do that? (Sorry, I'm a beginner!)

[jscheuer1]

I did some experimenting and it appears that in IE it also matters how many colors are in the .png file. Anything over 256 and the transparency doesn't work. At that color depth, the photographic section of your image isn't anywhere near the quality it is now. So, I would suggest making it into at least two images. I use Paintshop Pro so, the methods will vary. I had the best luck using progressive selection (using the magic wand selecting tool while holding down the shift key) to include areas into the selection until all the areas you want transparent are in that selection. Then, when saving, choose 'selected area' as the transparent area. It is tedious work and I stopped when I realized the image would need to be split in order to look good.

[Twey]

Insofar as I know, IE/Win doesn't support alpha transparency in PNGs. You can have 0 alpha, or you can have 255 alpha, but not anything in between. IE/Mac doesn't have this problem.