I have a gif graphic just to the right of main logo (upper left). It seems that the monitor displaying it changes the horizontal positioning (mine looks ok as a 16:9 ratio monitor but on letterbox 4:3 monitors it shuffles left and mostly hides behind the main logo.
I showed you how to do that in your other thread and it was all working fine, what happened?
I had told you that it needed to be nested in the #header and then the header needed position:relative; to become the containing block for the AP’d chute image.
You have since pulled it out of the header and wrapped it in a span with that silly 960 Grid .container_12 class. That is where you lost the relative positioned parent which served as the containing block.
The site just needs a wrapping div set at 960px with auto margins and your done centering once and for all.
By the way, you are linking to your style.css twice in the page head, just link to it once.
There is no need to wrap the image in a span with that class on it. The image had an ID hooked to it and if it had of been nested in the header everything would have been fine.
I restored your code but…
No, you have not done it correctly if you are referring to the link you posted above. The image is still nested in that span and you have not set position;relative; on your header. The position;relative; on your header is what will keep the chute image from sliding around.
That is all explained in your other thread.
I don’t know what page your working with but according to the link in your first post nothing has changed in the html yet. I have no way of knowing what you are doing unless you update the link with your changes.
You need to get that style.css linked to only once in your head element. I have already mentioned that above and it needs to get corrected so we can make live edits without interference from the second style.css link.
Anyway, here is how to do the html just as it was explained in the other thread.
If you look back at post#3 you will see that I gave you some links to the SitePoint reference that explain about absolute positioning and containing blocks. When position:relative; is set on a parent div it becomes the containing block for all it’s AP’d children.
You should not be needing z-index:-100 on the body element. I have not looked at it in IE7 yet but there should be no need for any z-index on the body.
When I removed the z-index:100;on the header, IE7 now shows the menu over the graphic. Knowing that the higher the Z-index number is the higher the layer upon which it appears, I’m not sure why that is happening as imagechute z-index is 95 and .sf-menu is 90 (line 377 of style.css). I’m pretty sure .sf-menu is the menu line.