Misbehaving layer - inconsistent alignment

[Joe_D...@adobeforums.com]

<http://www.muleheadbrand.com/mule-head-brand-solution1-oil-eating-bugs.html>
There is a jpg image of a gallon jug on this page. I put it in a layer.In Firefox, the jug is rendering to far left and covering type. In IE6, the layer is rendering off the grid. Can someone help?
Thanks,
Joe

[Nate_B...@adobeforums.com]

I don't think it's the difference in browsers causing the problem, but the difference in browser window size. If you change the width of the browser window, note that the rest of the site centers in the available space while the layer keeps its position from the top left.

Combining grids with layers usually leads to headache, but you can make the layer center with the rest of the content if you put it inside a container div that's the same size as the grid, and let its position be relative to that.

Here's a tutorial that should clarify:
<http://mindpalette.com/tutorials/center_layers/index.php>

You'll also need to check that the layer's z-index (and the container's z-index) are higher than the rest of the content - noticed that in Explorer 7 it ends up behind the grid content.

Or (better) add the image directly to the grid and skip the layer.