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