I have a banner-and-sidebar menu that I want to remain always-accessible. So I've made them both position:fixed, and used z-index to ensure the layers work properly. Both the CSS and HTML validate, and the whole setup works exactly the way I want it to in firefox.
Link to site in question
However, in IE there are several problems; the major problem is that, instead of layering the two divs on top of each other, IE puts the later-created one *below* the first.
Minor niggles that I can live with if they're too bothersome to fix:
- IE totally ignores the position:fixed elements - they scroll right off the screen. (Example: Test page for scrolling )
- IE, for some reason, feels compelled to put about 7pixels of blank space between left, right and top edges of the browser, and my banner/sidebar. I think it looks ugly. (I don't *think* it's a padding issue, because there is no specified border or padding for those elements. I tried specifying 0px for border/padding with the sidebar image, with no effect.)
I'm fairly inexperienced with CSS / HTML: have I missed something really obvious, and/or is there some way I can fix this, please? Thanks (in advance) for your help.
Edit: sorry, to clarify - I'm viewing with IE6, (don't have IE7, because I don't have SP2, because I'm lazy and moving to Ubuntu soon.), and Firefox 2.0.0.9