bem estou com problema aqui com meu site, mais com o CSS pois maior parte do site fica desconfigurado no Internet Explorer..
não quero dar suporte ao IE 6.0 por isso vou deixar uma mensagem quando a pessoa usar o mesmo, gostaria de me centrar mais no IE 7.0 e no 8.0,
se vcs acessarem o: http://www.iomerefm.com.br/ com o Firefox o site vai ficar normal mas quando acessa pelo IE fica uma xxxxxx.. todo desorganizado..
bem tentei procurar na Net por CSS Hacks e IE issues mas não encontrei alguma coisa que me ajude, ou encontrei so não entendi muito bem o que falava no mesmo..
espero que alguem possa me ajudar a reconfigurar para ficar direito no IE
index.html
<html> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <title>.:: IomerêFM - 104.9 - Hello World ::.</title> <link href="scripts/estilo.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="script_dest/contentslider.css" /> <!-- CSS --> <link rel="stylesheet" href="css/destaque.css" type="text/css" /> <!-- jQuery --> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/jquery.destaques.js"></script> <script language='javascript' src='clock.js'></script> <script type="text/javascript" src="script_dest/contentslider.js"> </script> </meta><style type="text/css"> <!-- a:link { text-decoration: none; color: #FFF; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #999; } a:active { text-decoration: none; color: #FFF; } #_RODAPE p { text-align: right; } #RODAPE_IMG p { text-align: center; } #RODAPE_IMG_IOMERE { text-align: center; } #pl{ position:relative; top:0; left:0; width:950px; text-align:left; background: url(player/img/fundo.gif) repeat-x; } --> </style> <script language="JavaScript"> function abrir(URL) { var width = 320; var height = 420; var left = 99; var top = 99; window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no'); } </script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <script language="JavaScript"> function abrirdest(URL) { var width = 800; var height = 700; var left = 120; var top = 99; window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no'); } </script> </head> <body> <div id="GERAL"> <!--Início do bloco #GERAL --> <!--Início do bloco #TOPO --> <div id="TOPO"></div> <!--Fim do bloco #TOPO --> <!--LOGOTIPO --> <div id="logotipo"> <!--Início do #MENU --> </div> </div> <ul id="MENU"> <li></li> <li><a href="index.php">Home</a></li> <li><a href="programacao.php">Programação</a></li> <li><a href="locutores.php">Locutores</a></li> <li><a href="top10">Top10</a></li> <li><a href="contato.php">Fale Conosco</a></li> </ul> <!--Fim do #MENU --> <!--Início do bloco #CONTEUDO --> <div id="CONTEUDO"> <!--Início do bloco TOP10 --> <div class="TOP10"></div> <div class="_TOP10"> <p><img src="imagens/top1.png" width="219" height="48"><br> <img src="imagens/top2.png" alt="" width="219" height="48"><br> <img src="imagens/top3.png" alt="" width="219" height="48"><br> <img src="imagens/top4.png" alt="" width="219" height="48"><br> <img src="imagens/top5.png" alt="" width="219" height="48"><br> <a href="top10">Veja todas as musicas clicando aqui</a></p> <p> </p> </div> <!--Fim do bloco TOP10 --> <!--Início do bloco DESTAQUES --> <div class="DESTAQUE"> <!-- INICIO DO CODIGO DOS DESTAQUES--> <!-- BANNER ROTATIVO--> <div id="_DESTAQUE" class="_DESTAQUE"> <!-- destaques --> <div id="blocoDestaques"> <ul> <li><a href="javascript:abrir('msn.html');"><img src="imagens/anunciomsn.png" alt="Claudia Leite" /></a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrir('msn.html');">"Peça sua música, clique aqui!"</a></p> </li> <li><a href="javascript:abrirdest('dest/claudia_des.html');"><img src="imagens/claudia_des.png" alt="Claudia Leite" /></a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrir('dest/claudia_des.html');">"Estou mais desnudada neste disco", diz Claudia Leitte sobre "As Máscaras", seu novo trabalho solo</a></p> </li> <li><a href="javascript:abrirdest('dest/justin_des.html');"><img src="imagens/justin_des.png" alt="Justin Bieber" /></a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrirdest('dest/justin_des.html');">"Quero fazer mais do que gravar, quero ser um entertainer", diz Justin Bieber; leia entrevista</a></p> </li> <li><a href="javascript:abrirdest('dest/gaga_des.html');"><img src="imagens/gaga_des.png" alt="Lady Gaga" /></a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrirdest('dest/gaga_des.html');">Lady Gaga diz que seu próximo disco será "mais espiritual"</a></p> </li> <li> <a href="javascript:abrirdest('dest/restart_des.html');"> <img src="imagens/restart_des.png" alt="Restart" /> </a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrirdest('dest/restart_des.html');">Rock Colorido: Os números impressionantes das novas manias da internet (na foto Banda Restart)</a></p> </li> <li> <a href="javascript:abrirdest('dest/green_des.html');"> <img src="imagens/green_des.png" alt="Lady Gaga" /> </a> <div class="fundo"><!-- --></div> <p><a href="javascript:abrirdest('dest/green_des.html');">Garanta seu ingresso para o show do grupo norte-americano Green Day</a></p> </li> </ul> </div> <!-- /destaques --> </div> </div> <!-- FIM DO CODIGO DOS DESTAQUES--> <!-- FIM BANNER ROTATIVO--> <!--Fim do bloco DESTAQUES --> <!--Início da RECADOS --> <div class="RECADOS"> <div class="CBOX" id="CBOX"> <!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="200" height="178" src="http://www4.cbox.ws/box/?boxid=3841841&boxtag=6n3w4k&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div> <div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=3841841&boxtag=6n3w4k&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div> </div> </div> <!-- END CBOX --></div> <!--Fim da RECADOS --></div> <!--Fim do bloco #CONTEUDO --> <!--Início do bloco #RODAPE --> <!-- INICIO DO BLOCO NOTICIAS --> <div class="DCETEMPO"> <div class="DCETEMPO_" id="DCETEMPO_"> <div class="dc tipo-3" id="cp"><style type="text/css"><!-- @import url("http://www.clicrbs.com.br/widgets/noticias/css/widget.css"); --></style><script type="text/javascript" src="http://www.clicrbs.com.br/widgets/noticias/js/widget.js"></script><div class="topo"><div class="bg"><h2><a target="_blank" title="Diário Catarinense" href="http://www.clicrbs.com.br/diariocatarinense/">Diário Catarinense</a></h2><h3>Últimas notícias</h3></div></div><div class="ct"><div rel="2,18,67,0,0,0" id="rbs_wid_not" class="ctr"><p class="nresult">Carregando...</p></div></div><img src="http://www.clicrbs.com.br/widgets/noticias/icon/empty.gif" style="display:none;" onload="widRbs.loaded(this);" /></div> </div> <div class="TEMPO" id="TEMPO"><a href="javascript:abrir('pedido.html');"><a href="javascript:abrir('pedido.html');"><img src="imagens/pedido_img.gif" width="159" height="170"></a> <iframe src='http://selos.climatempo.com.br/selos/MostraSelo.php?CODCIDADE=4822,382&SKIN=preto' scrolling='no' frameborder='0' width=150 height='170' marginheight='0' marginwidth='0'></iframe> </div> </div> <!-- ENQUETE --> <div class="ENQUETE"> <div class="enquetemove" id="enquetemove"> <!-- INICIO DO CODIGO DA ENQUETE --> <form action="http://www.enquetes.com.br/enquete.asp" method=GET> <b>Qual o melhor programa da 104?</b><br> <input type="checkbox" name="opcao" value="4908071">As 10 Mais<br> <input type="checkbox" name="opcao" value="4908072">As Véia do Véio<br> <input type="checkbox" name="opcao" value="4908073">Café da Manha<br> <input type="checkbox" name="opcao" value="4908074">Cidade Aberta<br> <input type="checkbox" name="opcao" value="4908075">Club Do Ouvinte<br> <input type="checkbox" name="opcao" value="4908076">Deixa Rolar<br> <input type="checkbox" name="opcao" value="4908077">Frequencia 104<br> <input type="checkbox" name="opcao" value="4908078">Musical Chama Viva<br> <input type="checkbox" name="opcao" value="4908079">Vida Jovem Cristã<br> <input type="hidden" name="id" value="914390"> <input type=hidden name="origem" value="http://www.iomerefm.com.br"> <input type=submit value=" Votar "> </form> <form action="http://www.enquetes.com.br/enquete.asp" method=GET> <input type=hidden name="origem" value="http://www.iomerefm.com.br"> <input type=hidden name="id" value="914390"> <input type=submit value="Resultado parcial"> </form> <!-- FIM DO CODIGO DA ENQUETE --> </div> <!-- INICIO DO RADIO --> <!-- FIM INICIO DO RADIO --> </div> <div class="SOCIAIS"> <div class="_SOCIAIS" id="_SOCIAIS"><script language="JavaScript"> function abrir(URL) { var width = 320; var height = 420; var left = 99; var top = 99; window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no'); } </script> <a href="javascript:abrir('msn.html');"><img src="imagens/msn_icone.png" width="139" height="81" border="0"></a><a href="http://www.twitter.com/iomerefm"><a href="http://www.twitter.com/iomerefm"><img src="imagens/twitter_icone.png" width="102" height="81" border="0"></a><a href="http://www.orkut.com.br/Main#Community?cmm=39694063"><img src="imagens/orkut_icone.png" alt="" width="102" height="81" border="0"></a><a href="mailto:iomerefm@yahoo.com.br"><img src="imagens/email_icone.png" width="139" height="81" border="0"></a></a></div></div> <div class="PROMO"><div class="_PROMO"><img src="imagens/promo_icone.png" width="425" height="125"></div></div> <div class="PATROCINIO"> <div class="_PATROCINIO"><a href="imagens/israel_patro.jpg" rel="lightbox" title="Construtora Novo Israel"><img src="imagens/israel_patro.jpg" width="142" height="105" border="0"></a> <a href="imagens/chamaviva_patro.jpg" rel="lightbox" title="Igreja Missionária Chama Viva"><img src="imagens/chamaviva_patro.jpg" width="142" height="105" border="0"></a> <a href="imagens/missoes_patro.jpg" rel="lightbox" title="Projeto De Missões - Missões Urgente"><img src="imagens/missoes_patro.jpg" width="142" height="105" border="0"></a><a href="imagens/parizotto_patro.jpg" rel="lightbox" title="RZ Parizotto"> <img src="imagens/parizotto_patro.jpg" width="142" height="105" border="0"></a></div> </div> <div id="RODAPE"> </div> <div class="_RODAPE" id="_RODAPE"> <p> Assoc. Cultural e Comunitária dos Amigos de Iomerê<br> Rua João Rech, 500, 3 andar<br> 89558-000 - Iomerê - SC<br> (49) 3539-6022 </p> </div> <div class="RODAPE_IMG" id="RODAPE_IMG"> <p>desenvolvimento: <br> <img src="imagens/logo_viecell.png" width="100" height="52" border="0"> <br> <img src="imagens/logo_lucas.png" width="100" height="52" border="0"> </p> </div> <div class="RODAPE_IMG_IOMERE" id="RODAPE_IMG_IOMERE"> <span id="RODAPE_IMG_IOMERE">direitos reservados à:<br> <a href="http://www.iomerefm.com.br"><img src="imagens/logo_iomere.png" width="130" height="115" border="0"></a></span></div> <div class="CONTADOR"> <img src="http://contador.s12.com.br/img-1W111WYB-57.gif" alt="Counter" border="0"></div> <div class="RECOMENDA"><br> Melhor visualizado em 1024x768 com o:<a href="http://mirror.karneval.cz/pub/mozilla/firefox/releases/3.6.3/win32/pt-BR/Firefox%20Setup%203.6.3.exe"><img src="imagens/firefox.png" alt="" width="23" height="23" border="0"></a><a href="http://dl.google.com/chrome/install/375.29/chrome_installer.exe"><img src="imagens/google_chrome.png" width="23" height="23" border="0"></a><a href="http://snapshot.opera.com/windows/Opera_1053_3374_in.exe"><img src="imagens/opera.png" width="23" height="23" border="0"></a></div> </body> </html>
estilo.css
/*Formatação básica do layout ****************************/ body { left:3%; margin-left:-75px; /* metade da largura fictícia */ position:absolute; margin:0 auto; padding:0px; background: #333333 url(../imagens/background.gif); color: #666666; font: 11px "Trebuchet MS", Calibri, Verdana, Arial; } /*Formatação bloco GERAL ****************************/ #GERAL { background-color:#009900; width: 950px; position: relative; } /*Formatação bloco TOPO ****************************/ #TOPO { background: #333333 url(../imagens/bg_topo.jpg); width: 950px; height: 150px; position: relative; float:left } /*Formatação do MENU ****************************/ ul#MENU { margin:-35px 4px 0px; padding:0px; width: 421px; height: 34px; text-align:center; position:absolute; font-size: 0.8em; font-style:inherit; font-family: "Lucida Grande", Verdana, sans-serif; background:url(../imagens/botoes.png); font-weight: bold; list-style-type: none; top: 153px; left: 515px; visibility: visible; text-align: center; } ul#MENU li { display:inline; margin-right: 20px; } ul#MENU li a { text-decoration:none; color:#e97e30; font: 14px Calibri, Verdana, Arial; } ul#MENU li a.active, ul#MENU li a:hover { color: #858585; } #menu .rss{ width:37px;height:36px; background:url('http://2.bp.blogspot.com/_9FoH-7_4Le0/S8pbstvvKjI/AAAAAAAABE8/CZDW7KLLMq4/s1600/rss.png') no-repeat; left:950px; top:-190px; } #menu .rss span{ width:132px; height:26px; background:url('http://3.bp.blogspot.com/_9FoH-7_4Le0/S8pbs1fTB1I/AAAAAAAABFE/w2WbUUrgFrI/s1600/rss-hover.png') no-repeat; left:-137px; top:0px; } /*Logotipo ****************************/ #logotipo { width:286px; height:147px; background: url(../imagens/logotipo.png) no-repeat top; clear: both; float: left; margin-top: -90px; position: absolute; left: 31px; top: 92px; } /*Formatação bloco CONTEUDO ****************************/ #CONTEUDO { background: #FF9900; color: #FFAD37; position: relative; float:left; width: 950px; } /*Formatação bloco TOP10 ****************************/ .TOP10{ float: LEFT; width: 250px; height: 330px; background: #353535 url(../imagens/top10_bg.png) repeat-x center top; position: relative; } ._TOP10{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #7f7f7f; text-align:center; clear: both; float: left; width: 224px; height: 266px; position:absolute; left: 9px; top: 55px; text-decoration:none; } /*Formatação bloco RECADOS ****************************/ .RECADOS{ float: LEFT; width: 225px; height: 330px; background: #353535 url(../imagens/mural_bg.png) repeat-x center top; position: relative; } .CBOX{ width:240px; height:100px; clear: both; float: left; margin-top: -90px; position: absolute; left: -6px; top: 145px; } /*Formatação bloco DESTAQUE ****************************/ .DESTAQUE{ float: left; width: 475px; background: #cc6ccc; height: 330px; background: #353535 url(../imagens/destaques_bg.png) repeat-x center top; position: relative; color: #515151; } ._DESTAQUE{ width:240px; height:100px; clear: both; float: left; margin-top: -90px; position: absolute; left: 45px; top: 145px; } /*Formatação bloco enquete ****************************/ .ENQUETE{ clear: both; float: left; width: 200px; height: 350px; top:-350px; background: #353535 url(../imagens/enquete_bg.png) repeat-x center top; position: relative; } .enquetemove{ width:195px; height:100px; clear: both; float: left; margin-top: -90px; position: absolute; left: 3px; top: 140px; } /*Formatação bloco NOTICIAS ****************************/ .DCETEMPO{ clear: both; float: left; width: 750px; height: 350px; background: #353535 url(../imagens/newstime_bg.png) repeat-x center top; position: relative; left: 200px; } .DCETEMPO_{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #989898; clear: both; float: left; width: 357px; height: 80px; position:absolute; top: 57px; left: 18px; } .TEMPO{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #989898; clear: both; float: left; width: 332px; height: 176px; position:absolute; top: 57px; left: 396px; } /*Formatação bloco REDES SOCIAIS ****************************/ .SOCIAIS{ clear: both; float: left; width: 495px; top: -350px; height: 150px; background: #3c3cfc; position: relative; background: #353535 url(../imagens/soc_bg.png) repeat-x center top; } ._SOCIAIS{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #989898; clear: both; float: left; width: 494px; height: 80px; position:absolute; top: 55px; left: 5px; } /*Formatação bloco PROMOÇÕES ****************************/ .PROMO{ clear: both; float: left; width: 455px; top: -500px; left: 495; height: 150px; background: #3c3cfc; position: relative; background: #353535 url(../imagens/promo_bg.png) repeat-x center top; } ._PROMO{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #989898; clear: both; float: left; width: 425px; height: 125px; position:absolute; top: 9px; left: 17px; } /*Formatação bloco PATROCINIO ****************************/ .PATROCINIO{ clear: both; float: left; width: 950px; top: -500px; height: 191px; position: relative; background: #353535 url(../imagens/patro_bg.png) repeat-x center top; } ._PATROCINIO{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #989898; clear: both; float: left; width: 950px; height: 114px; position:absolute; left: 23px; top: 59px; } /*Formatação bloco RODAPE ****************************/ #RODAPE { clear: both; float: left; width: 950px; height: 135; background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top; position: relative; top: -500px; } ._RODAPE{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #ff9500; clear: both; float: left; width: 305px; height: 66px; position:absolute; left: 21px; top: 1175px; text-decoration:none; } .RODAPE_IMG{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #ff9500; clear: both; float: left; width: 131px; height: 123px; position:absolute; left: 811px; top: 1167px; text-decoration:none; } .RODAPE_IMG_IOMERE{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #ff9500; clear: both; float: left; width: 131px; height: 123px; position:absolute; left: 667px; top: 1168px; text-decoration:none; } .RECOMENDA{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #ff9500; clear: both; float: left; width: 307px; height: 16px; position:absolute; left: 21px; top: 1254px; text-decoration:none; } .CONTADOR{ font: 12px "Trebuchet MS", Calibri, Verdana, Arial; color: #ff9500; clear: both; float: left; width: 35px; height: 16px; position:absolute; left: 439px; top: 1288px; text-decoration:none; }