CSS absolute positioning bug with IE9

I have a problem with IE9 and absolute positioning. I tried to post it in JSfiddle, but there are rounded corners in IE even I am using CSS3 that IE doesn't support, that having me suggest that JSfiddle have its on engine. In other words it is showing fine ev开发者_运维问答erything, but in IE9, its ignoring top margin and just comes up to the screen.

My suggest is to copy/paste it in your editor and try in IE9. Thanks.

Code may be seen here

And here:

<div id="container">
<div id="branding">
branding
</div>
<div id="content">
<div id="content_main">
<p>Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst.</p>
</div>
<div id="content_sub">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
<div id="site_info">
<p>Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst.</p>
</div>
</div>


body{
font: 76%/160% Tahoma, Verdana, Arial, sans-serif;
color: #5a1c46;
text-align: center;

}


div#container{
width: 780px;
margin: 0 auto;
padding: 0;
text-align: left;

}


div#branding{
/*when its display: none it is displaying correctly content*/
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #009;

}


div#content{
position: relative;
width: 100%;
overflow: auto;
margin-top: 200px; /*this margin is ignoring while branding is visible*/
min-height: 500px;
background-color:#F00;

}


div#content_main{
position: absolute;
top: 0;
left: 240px;
width: 540px;
margin: 0;
padding: 0;

}


div#content_sub{
position: absolute;
top: 10px;
left: 15px;
width: 190px;
margin: 0;
padding: 10px;
border-radius: 10px 30px 10px 30px;
background-color:#Ff0;

}


div#site_info{
margin: 0;
padding: 0;
min-height: 50px;
border-radius: 0 0 20px 20px;
width: 100%;
background-color: #FF0;
}

---

Your browser is in compatibility mode. Turn it off and it will look fine.

To force your users to use the best rendering engine use x-ua-compatible as a header or in a meta html tag on your page.

Here you can find the icon, if it's blue it means compatibility mode is activated, so mine is activated in IE9 http://imgur.com/BPDq3

---

These sort of issues are caused by Compatibility mode

To edit compatibility mode settings in IE9:

1. alt+t > Compatibility View Settings
2. clear out all websites and uncheck all boxes.

Now your browser won't go into compability mode (unless a website forces it with <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />)