CODEWITHSUNDEEP
csscross-browser
Dexy_Wolf
Dexy_Wolf

Reputation: 999

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 everything, 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;
}

Upvotes: 2

Views: 14657

Answers (2)

sg3s
sg3s

Reputation: 9567

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 https://i.sstatic.net/RXE14.jpg

Upvotes: 5

user888750
user888750

Reputation:

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" />)

Upvotes: 1

Related Questions