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;
color:#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>