layered position:fixed elements broken in IE

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Avaenuha
    New Member
    • Apr 2007
    • 19

    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
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    Originally posted by Avaenuha
    - 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.

    Comment

    • Avaenuha
      New Member
      • Apr 2007
      • 19

      #3
      Thanks for the advice (have changed to Strict). Will make an alternate CSS for IE.

      Thanks.

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        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).

        Comment

        Working...