absolutely positioned DIV not showing on IE
This is the simplified style for a blog hosted at wordpress.com. The code is validated CSS, yet IE won't show it correctly (that are not really news, are they?). In particular, the upper menu (#primary div) can't be seen in IE, rendering the blog pretty unusable.
The easy solution would be to change div orders, but as the style is given by wordpress, the restriction on this problem is you can only change the css code, not the html.
Can you guys figure out an easy override to IE's presentation quirks? I've read that this may be related by hasLayout properties, but i'm not proficient on web design.
<HTML><HEAD >
<style type="text/css">
div#wrapper {
width:1000px;
background:#fff url('http://embolsados.files.wordpress.com/2009/03/bg.png') repeat-y 50% 0;
margin:0 auto;
}
div#header {
text-align:center;
background:#ddd;
color:#eee;
width:980px;
height:333px;
position:relative;
left:10px;
margin:0;
}
div#container {
float:left;
position:relative;
left:10px;
top:0;
width:630px;
font-size:.9em;
line-height:1.8em;
padding:30px;
}
#primary {
background:#32a855;
width:980px;
position:absolute;
top:333px;
text-indent:15px;
border:0;
margin:0 0 0 10px;
padding:0;
}
#secondary {
float:right;
overflow:hidden;
width:270px;
position:relative;
left:-10px;
top:0;
padding:10px;
}
div#footer {
background:#32a855 url('http://embolsados.files.wordpress.com/2009/05/footer.png') no-repeat;
colo开发者_如何学Cr:#fff;
text-align:center;
clear:both;
height:40px;
padding-top:25px;
position:relative;
}
div#footer a {
color:#fff;
}
</style>
</HEAD>
<BODY>
<DIV id=wrapper>
<DIV id=header>Title</DIV>
<DIV id=container>
<DIV id=content>Content.</DIV>
</DIV>
<DIV class=sidebar id=primary>Upper menu.</DIV>
<DIV class=sidebar id=secondary>Side menu.</DIV>
<DIV id=footer>Footer</DIV>
</DIV>
</BODY>
</HTML>
It looks like this is your issue
http://www.brunildo.org/test/IE_raf3.html
In short add an empty <div></div> between the floated element and the abs positioned element. It's ugly but it's the only thing i found that worked.
AFAIK there's no way other than removing the float property on the sibling elements or as you stated, change the source order.. possibly wrap a div around the AP.
You can try to add following line to the #primary styles section:
*display: expression(style.display='block', 0);
Wrapping the absolutely positioned element in a non-floated div does the trick.
http://www.daharsh.net/tech/2008/10/ie6-or-ie7-position-absolute-not.htm
加载中,请稍侯......
精彩评论