Will someone please take a look at this:
and tell me where I'm going wrong with the z-index.
the css is here:
em - what do you see that is wrong, is it browser specific? you could add some trial text to make it easier to check as well.
The spotlight images that are floated left and right in the proscenium (header) div aren't showing above the background 'curtains' (right and left columns). I know there is a problem with the way IE handles z-index but I thought that the way it was set up would deal with that. As it isn't working in FF either it must be something I'm doing wrong.
Firefox doesn't like the z-index on a DIV set to relative... Not sure if that's the fault here as I don't have time to do a proper review.
Also I'm curious as why you are needing to set z-index values?
This may help for a three column layout.
#proscenium - overflow:visible;
Cracking dr john, I can see I'm going to have to include you in my links pages.
Faolan: I'm not sure the tutorial you suggested will keep the footer at the bottom of the page if the content isn't large enough to force it there so the stage design I'm working with will be so foreshortened it won't make sense.
The footer currently DOES stay at the bottom of the browser window...
Looking at the page you link to above, with the prompt corner thing in place (and before it was added as well),
the footer is still staying at the bottom of the browser window, whatever height of browser window I use, in Firefox v2 and in IE7. Just as it has done ever since I first looked at it on Friday.
I haven't looked at it with IE6 yet.
That's interesting, I get a 2 or 3 pixel gap at the bottom of the page in FF 184.108.40.206 which shows as the curtain (i.e. the repeating background URL of the body style). This is below the bottom of my screen and has to be scrolled down to. Using <!-- --> to comment out the image of the screen removes this gap. Increasing the negative margin of the .screen style (applied to that image) by 3px removes the gap between the understage div and the bottom of the page but leaves the image floating 2 or 3 px above the bottom of the backstage div.
I don't see any red curtains below the footer.
No-one will notice if the image bottom left is a few pixels off the absolute bottom - they'll think it is meant to be there.
I've not tried editing your code, as the image being that tiny bit higher seems unimportant to me.
PS It's quite an imaginative layout, taking advantage of z-indexes and that hint I gave you (although the colours are a bit strong) and I think most people will be impressed enough by it as it is.
What version of FF are you using?
I'm inclined to agree about the bottom, especially as it's not noticeable unless one is really looking.
The colours are temporary, I'm waiting for the client to come up with the colours they want to use, I am using them because the dramatic effect shows up errors in the cleaned edges of the images.
I'm moving towards using silhouettes on the index page with 'real' pictures 'behind' them to click on and take the visitor to the more detailed parts of the site.
In fact I'll upload what I've done so far:
I'm using FF 220.127.116.11
However, the link in your last post now shows the problem you mention.
But the first link you gave still doesn't. you've obviously got some small difference in there that you've missed.
No sure at all about those silhouettes! Dark shapes are not what I'd expect, especially not if I'm supposed to click on them. The outlines on the right look particularly confusing, IMHO.