IE8 background image shifts

[Fernando Mol]

It’s weird, I tested in in IE8, IE7 and IE6 an that doesn’t happen in my computer (Win7 64).

Anyway, you may want to try a different div structure. Use a single image background for the entire header and just place the menu text buttons in front.

You can try assigning a centered position to

background-position:center;

I hope this helps

[Christopher Filbey]

Finally got it fixed! Your suggestions weren’t quite the solution, but it got me thinking (excuse the burning smell!).

When you mentioned using the header and menu as one graphic, I had a brainwave. I made all those images with GIMP, and in the interest of uniformity, made them all the same 900-pixel width. Problem was, only the header image was 900 pixels; the others had empty space on the sides, bringing them up to 900. IE wasn’t recognizing that empty space, and treated it like, say, the 884-pixel menu. This accounts for the misalignment.

Long story short, I cropped the images to their “true” widths and had the CSS reflect those widths. Now, they render properly in everything I’ve tested: IE6, IE8, Firefox, Opera, Netscape, and Google Chrome. Thanks to you and Curtis for the hand.