Welcome!

[JoelC]

Hey guys,

I've been working on an overhaul of my site and have been trying to save my header/menu as transparent .png slices. Everything is lining up well in the CSS, but the outer glow effect is all wrong.
I've set up a test page for you to see: http://www.joelfolio.com/test/

This is the way I'm slicing the image up:
1) Header
2, 3) Static images, simply for the header shadows
4-7) Button rollovers, you either see the top or the bottom half in the menu.


Proof that it lines up including shadow before save:


I've tried to save these slices in pretty much every way possible. Be it using the Save For Web option and slicing them up or manually cutting them and saving or even trying to flatten the image before I save so that there won't be any changes at all. None of these worked.

A curious thing is that when I open up the saved .PNGs, they line up perfectly in Photoshop and the shadows meld correctly. The outer glow issue only occurs on the website - but they are obviously lined up correctly - you can tell by the letters (plus there only seems to be an issue between the top header image and the bottom row of images - not between the images on the bottom row).

Any ideas? This has been driving me crazy for the past all-nighter
Thanks a lot!

[Andy]

Ugh. Don't slice it.

Use the image you got and simply change the background position instead.

[JoelC]

That's what I did in the end (regarding the Joelfolio in the background). I prefer slicing the buttons into 4, it makes the coding much clearer to me.

Thanks though

[Andy]

That's what I did in the end (regarding the Joelfolio in the background). I prefer slicing the buttons into 4, it makes the coding much clearer to me.

That's a terrible thing to do when it comes to UX. You should combine as many images as possible to make the whole experience faster for the user.

Here's some stuff I think you should read up on: http://developer.yahoo.com/performance/rules.html

[JoelC]

Done, thanks