On Sep 28, 2006, at 4:03 PM, Travis Killen wrote:
> I would like the menu (#Menu) to appear 'on top of' (#Content)
> html: http://tylerstrings.com
Thanks for posting the url to your page. It makes helping so much
Unfortunately, some parts of your code are contrary to other parts of
your code, and when they conflict, different browsers will give
different renderings. Therefore, I going to suggest a detour.
First, validate your html. In your case, that just means removing the
#searchme span (you can put the id directly on the form). Second,
remove all bits of presentation from the html, that includes all the
style attributes and the center element and transfer that information
to the css file. Third, look at the page with css turned off to see if
it makes sense. Once you are happy with how the page reads with css
turned off, re-validate to make sure errors haven't crept in. Then you
can add the presentation to the css file. Reality intrudes on this
process sometimes, but if you aim for a process like this you page will
work better on more different kinds of web clients.
In terms of your actual question ( took me long enough to get here :-)
) the z-index will alter the natural stacking of positioned elements.
Normally elements that come later in the document will stack on top of
elements that came before it. So, in your case, #menu will stack on
top of #content even without a z-index applied. Where it gets tricky
is that each positioned element can serve as a base for a new stacking
context, and the z-index only applies within the current stacking
context. Here's an article that explains the concept better than I can
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
~Allison Gappa Bottke
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/