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:开发者_如何学Python100%;
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>
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.
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.
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.
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.
Try to change banner_wrap to
#banner_wrap{
position:fixed;
z-index:-1;
right: 0px;
bottom: 0px;
}
加载中,请稍侯......
精彩评论