PDA

View Full Version : Absolute Position / Z-index



michael180
Apr 1st, 2007, 06:57 PM
REF: http://moderntimes.com/palace/black/posters.html

I'm having trouble with the absolute positioning I need to use the Z-index property for my title graphic. I designed the page for FF for the Mac. The problem is that it renders different in Safari, Opera, FF for Windows, and it's appalling in IE7.

Any help?

Excavator
Apr 1st, 2007, 07:09 PM
Hello michael180,
If your absolute positioning the logo and centering #outer, at some point they are going to interfere in any browser.
It would be better to nest 2 divs, one wider one with your logo and your content in that.
Try this...in your CSS delete #logo and change #outer to this:


#outer {

width: 750px;

background: url("side_banner.png") no-repeat;

margin-right: auto;

margin-left: auto;

position: relative;

}
I know that got rid of a border you need. I'm just showing you how to nest a div for your logo without my having to edit your markup. If you want that border, you'll need to put #outer back to it's original width and create another div for the logo.


Then read this: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

michael180
Apr 1st, 2007, 07:24 PM
Excavator, I see now what you mean about interference. I may just redesign adding the logo to a fixed background image. That my be the easiest. I'll play around with it.

Thank you very much.

Michael