Question

For the last few days I have been designing a layout for my website based on some art I drew. The layout turned out great on Chrome and Firefox and then I checked IE and it looked horrible.

I know that only IE 7 supports position fixed but it’s not working for me… and I have tried about ten different codes that should allow the image to move to the bottom right but with how many layers my layout has, it does not work.

http://lindsiria.net/

As you can see, I have two problems on IE. My whole layout is moved over and my main banner image is not at the bottom right. I was wondering if someone could look at this code and help me figure out a solution for this annoying error. Hope I posted this right.

<code>
<!-- language: lang-css -->

* { margin:0;}
body {
    background-color:#2397b6;
    background-image: url("mainbackgroundrepeat1"); 
    background-repeat: repeat-x;
    background-position:bottom;
    background-attachment:fixed;
    height:100%;
    }

a:link { color:#2b8c56;}
a:visited {color:#2b8c56;}
a:hover {color:#f0faef;}

#banner_wrap{
    width: 100%;
    display: block;
    position:fixed;
    bottom:0;
    margin-left:800px;
    width:500px;
    z-index:-1; 
    height: 353px;

}

#logo_wrap {
    position:absolute;
    width:600px;
        margin-left:200px;
    margin-top:2px;
 }

#wrap {
    position:absolute;
    width: 580px;
    min-height:100%;
    height: auto;
    margin: 180px 0 -353px 180px;
    background-color:#b2d6df;
    border: 10px solid #2b8c56;
    text-align: left;
        padding: 10px;
 }

#footer {
    font-size: .75em;
    font-style: italic;
    text-align: left;

}
/* START NAVIGATION */

#centeredmenu {
   float:left;
   width: 600px;
   margin-left:180px;
   margin-top:100px;
   background:#b2d6df;
   border: 10px solid #2b8c56;
   overflow:hidden;
   position:absolute;
}
#centeredmenu ul {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   width: 77px;
   padding:9px;
   margin:0 12px 0 12px;
   border-bottom: 4px solid #5bc668;
   color:#000;
   text-decoration:none;
   font-variant:small-caps;
   letter-spacing:2px;
   font-weight:500;
   line-height:.7em;
}
#centeredmenu ul li a:hover {
   border-bottom:4px solid #f0faef;
   color:#000000;
}
/* END NAVIGATION */
</code>

Answer 1

Your mark-up does need a bit of work but you will get a better understanding as you get more experienced. Rather then use a negative z-index and have the image in a div at the bottom of your mark-up, another possible solution is to wrap your page in a wrapper div that is larger then your page and set the background-image to that of your sea lion and have it fixed and to the left.

See this updated, and now working version, JSfiddle: http://jsfiddle.net/84qAg/1/

Hope this helps and best of luck with it all.