CODEWITHSUNDEEP
cssinternet-explorer
Lindsiria
Lindsiria

Reputation: 187

Position:Fixed and IE

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>

Upvotes: 1

Views: 1657

Answers (5)

Dan
Dan

Reputation: 10351

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.

Upvotes: 0

duri
duri

Reputation: 15351

Browsers display your website in quirks mode, this is why your layout is broken. Change your doctype to

<!doctype html>

Also, please note that absolute positioning is bad for creating layouts.

Upvotes: 1

John
John

Reputation: 404

Try to change banner_wrap to

    #banner_wrap{
    position:fixed;
    z-index:-1; 
    right: 0px;
bottom: 0px;

}

Upvotes: 0

Jawad
Jawad

Reputation: 6672

I can't imagine what are your reasons for doing the way you are doing it. Why do you need position: fixed and absolute in your situation. Just add a div with a id of wrapper as a direct child of the body element and place all other divs inside it, give it a margin: 0 auto, to center it. Than you can also give it a position: relative and other div's inside it position: absolute for further syling. You layout looks broken even in IE9. Remove all margin-left. You have a very simple design. You could od as

div#wrapper
{
width: 960px;
margin: 0 auto;
}

Next put the image in the div#banner_wrap in the background image of the body element, Since the body element has already a fixed background image property, it will work out the same and inthis way you would not need to add another div.

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Rather than try to figure out what tweak would fix your problem, I would recommend a different strategy for marking up and styling your main content. First, rather than put text content directly into your divs and use break tags to separate paragraphs, put them in paragraphs. They're block elements by default and will create natural separation for your content (you're using some css reset, so you'll probably need to add some margin-bottom style to your paragraph tags.) Second, if you're going to use position: absolute, then use top:, left: etc. to position your element, not margins.

Upvotes: 0

Related Questions