471,598 Members | 1,273 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

layered position:fixed elements broken in IE

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
Nov 17 '07 #1
3 2005
drhowarddrfine
7,435 Expert 4TB
- IE totally ignores the position:fixed elements
Position:fixed only works in modern browsers, not IE.
moving to Ubuntu soon.
There is little need for Windows anymore.

You are using the xml declaration on the first line. Although you are correct in doing so, only modern browsers interpret it correctly which, again, does not include Internet Explorer and it goes into 'quirks' mode. You can safely remove that first line.

One note, you are using the transitional doctype. New web pages have no need for this and you should switch to the strict doctype.

All versions of IE are going on 10 years behind other browsers in web standards support.
Nov 17 '07 #2
Thanks for the advice (have changed to Strict). Will make an alternate CSS for IE.

Thanks.
Nov 17 '07 #3
drhowarddrfine
7,435 Expert 4TB
Why make a seperate style sheet? Did you remove the xml declaration and see what happens then? The doctype won't fix anything. And there are hacks for IEs position problem (though they use javascript).
Nov 17 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Grayle | last post: by
9 posts views Thread by Paul Trautwein | last post: by
4 posts views Thread by Peter Fjelsten | last post: by
5 posts views Thread by Ted Mayett | last post: by
7 posts views Thread by Erik Sandblom | last post: by
11 posts views Thread by Mathias Wrede | last post: by
2 posts views Thread by Eric Lindsay | last post: by
5 posts views Thread by pbd22 | last post: by
8 posts views Thread by sheldonlg | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.