Sorry. No dice. I too am struggling as I know this has been done before. Typically I’ve seen these images in one file though and through background positioning they move the entire image around. I have created separate graphics for each of the nav buttons and am only positioning up and down. Would this have anything to do with it?
The header is now staying in position however the background graphic for the content-wrapper is now moving down on the hover state. Also the absolute positioning cuts off the bottom of the text on the main content. I originally set the height to auto but this doesn’t seem to have an impact on it now. I am going to change it back to what I originally had for now.
OK this is whacky. When you hover the whole page moves down. So in essence the header is now lining up with the background image but when you hover the entire page shifts down about 10 pixels. So it seems to be getting closer but still weird. Also, on IE6 my footer is now not displaying. Thanks for digging into this.
I was getting so frustrated with this I just booted up the pc (now I feel dirty, had to have a wash before I came back to the mac :roll: ) I’ve tested the page in ietester(6, 7 and 8), a standalone version of ie6, ie7 and ie8 and I don’t see any problems, no page shift on hover, nothing!
So now I really am at a loss. If you are still seeing a problem, about the only other thing I can suggest is, for ie6 only, you use 2 separate images for each nav link and replace the image on hover.
Well if you’re not seeing the problem, I have no idea what is going on. Since it seems to be working on every other browser I’ve tested I may just put this one to bed. Thanks for taking the time to help troubleshoot. I think what code suggestions you’ve given have done the job.