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.
- LarPhozyHah likes this