Estou criando um site somente com utilização de div's, porém nao consigo posicionar uma div sobre a outra no IE, o posicionamento funciona no firefox, chrome, ópera, safari.... menos nos IE..
preciso que a "div SUB" flutue sobre a "div TOP", mas no IE a "div SUB" se posiciona ao final da "div TOP" no bottom e right dela...
segue imagens para a visualização do problema:
Posição correta (firefox e outros):
Posição ERRADA (IE's):
Segue códigos:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>@import "lynx.css";</style>
<script type="text/javascript" src="swfobject.js"></script>
<title>Lynx Eventos & Treinamentos</title>
</head>
<body>
<div id="container">
<div id="leftbg"> </div>
<div id="middlebg">
<div id="sub"> </div>
<div id="top" class="top"></div>
<script type="text/javascript">
var so = new SWFObject("top.swf", "top", "780", "145", "9.0", "#ffffff");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.write("top");</script>
<div id="contents">
<div id="atuacao"> </div>
</div>
</div>
</div>
<div id="rightbg"> </div>
</div>
</body>
</html>CSS
@charset "UTF-8";
/*GERAIS*/
html, body {height:100%; margin:0; padding:0; border:0; background-color:#7e7e7e; overflow-x: hidden; overflow-y: auto;}
/*MONTAGEM*/
#container{width:100%; height:100%; background:#7e7e7e;}
#leftbg{width: 50%; height:100%; display:block; float:left; margin-left: -390px; background:url(imgs/bgsite_left.jpg) top right repeat-x;}
#middlebg{width: 780px; height:auto; display:block; float:left; margin:auto; z-index:1; background:url(imgs/bg_contents.gif) top left repeat-y;}
#rightbg{width: 49%; height:100%; display:block; float:left; margin-right:-390px; background:url(imgs/bgsite_right.jpg) top left repeat-x;}
.top{ width:780px; height:145px; float:left; display:block;}
#sub{width:200px; height:200px; background-color:#FF0000; float:left; z-index:21; position:absolute; margin:0px; padding:0px; display:block;}
#contents{ width:780px; height:auto; min-height:320px; display:block; padding-bottom:15px; float:left; background:url(imgs/bg_contents_top.gif) top left no-repeat;}
#bottom{ width:780px; height:80px; display:block; float:left; background:url(imgs/bg_bottom.gif) top left no-repeat;}
/*BANNERS*/
#atuacao{ width:710px; height:210px; display:block; float:left; margin:25px 0px 0px 35px; background:url(fla_imgs/atuacao_guide.jpg) top left no-repeat;}Alguma solução? desde já, grato.
RESOLVIDO > retirei o float da "div TOP" e funcionou corretamente nos IE também.
