Publicado em 27 de jul.

Problema de exibição com Internet Explorer

Olá, este é meu primeiro post aqui, estou tendo problemas com o site http://www.fmtropicalfm.com/ no Chrome e Firefox ficou perfeito da maneira que o cliente me pediu, sou novo nessa área e só pego alguns serviços fáceis, porem o Internet Explorer está me dando dores de cabeça, pois o modelo fica completamente errado e estranho, inclusive as imagens em PNG que nunca vi dar problema em navegadores, alguém poderia me ajudar?

Aqui está o CSS

* {

margin:0;
padding:0;
}

body {

background-image: url(/img/menu/fundo-do-menu.png);
background-repeat:repeat-x;
background-color:#222;
margin:0;
}

body,td,th {

font-size:12px;
font-weight:400;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.fade {
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover
{

opacity:1.0;
filter:alpha(opacity=100);
-moz-opacity: 1.0;
}

.gradiente {
 margin:0 auto;
 background:#990000;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC0000', endColorstr='#990000');
 background: -webkit-gradient(linear, left top, left bottom, from(#CC0000), to(#990000));
 background: -moz-linear-gradient(midd, #CC0000, #990000);
text-shadow:2px 2px 2px #000;
 font-size:13px;
 font-weight:700;
 color:#FFF;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
}

.menu {
border:0;
font-size:12px;
font-weight:400;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

.menu ul {

background:#222;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li {

float:left;
padding:0;
}

.menu li a {

background:#222;
color:#FFF;
display:block;
font-weight:400;
line-height:35px;
text-align:center;
text-decoration:none;
margin:0;
padding:0 25px;
}

.menu li a:hover,.menu ul li:hover a {

background:#971805;
color:#fff;
text-decoration:none;
-moz-border-radius: 0px 0px 12px 12px;
-webkit-border-radius: 0px 0px 12px 12px;
border-radius: 0px 0px 12px 12px;
}

.menu li ul {

background:#000;
display:none;
height:auto;
border:0;
position:absolute;
width:225px;
z-index:200;
margin:0;
padding:0;
}

.menu li:hover ul {

display:block;
}

.menu li li {

display:block;
float:none;
width:225px;
margin:0;
padding:0;
}

.menu li:hover li a {

background:none;
}

.menu li ul a {

display:block;
height:35px;
font-size:11px;
font-style:normal;
text-align:left;
margin:0;
padding:0 10px 0 15px;
}

.menu li ul a:hover,.menu li ul li:hover a {

background:#971805;
border:0;
color:#000;
text-decoration:none;
}

.menu p {

clear:left;
}

a { color: #fff; }

a:link {

color: #fff;
-webkit-transition: color 0.7s ease-out;
-moz-transition:color 0.7s ease-out;
transition: color 0.7s ease-out;
}

a:hover {

color:#FF3300;
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

E o código da página

<!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-language" content="pt-br" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="Cache-control" CONTENT="no-store">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Rádio Tropical FM 87,9, sempre tocando os melhores sucessos no seu rádio, confira!" />
<meta name="keywords" content="radio, tropical, fm, tupi paulista, são paulo, música, ao vivo, sertanejo, pop, mpb, mp3" />
<meta name="author" content="Renan Cavalieri, www.tecdicas.com" />
<title>Rádio Tropical FM 87,9 - A Rádio de Tupi Paulista</title>
<link rel="stylesheet" href="/css/fmtropicalfmcss.css" type="text/css" />
<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-24017938-2']);
 _gaq.push(['_trackPageview']);

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>
</head>
<body>
<div id="fb-root"></div>
	<script>
 (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
	</script>
<center>

<div style="width:1005px">
	<?php
 include("_menu.php");
	?>
</div>

<div style="float:left; width:210px;">
	<?php
 include("_esquerda-a.php");
	?>
</div>

<div style="float:right; width:790px;">
	<div class="gradiente" style="width:790px; height:20px;">Clique nos artistas ao lado para carregar o vídeo</div>
	<div style="float:right; width:790px; height:350px; background:#fff;"><iframe name="video" width="790" height="350" src="http://www.youtube.com/embed/M79e5ji-53w" frameborder="0"></iframe></div>
	<div style="width:790px; height:15px; clear:both;"></div>
	<div style="width:300px; height:320px; float:left;">
 <div class="gradiente" style="width:300px; height:20px;">Horóscopo</div>
 <div style="width:300px; height:300px;"><iframe id='horoscopovirtual-gadget' name='hv-gadget' src='http://www.horoscopovirtual.com.br/gadget/horoscopo/?background=333333&color=ffffff' framespacing='0' frameborder='no' scrolling='no' width='300' height='300'></iframe></div>
	</div>
	<div style="width:10px; height:320px; float:left;"></div>
	<div style="width:470px; height:320px; float:left;">
 <div class="gradiente" style="width:470px; height:20px;">Curta nossa página no Facebook!</div>
 <div style="width:470px; height:300px; background:#fff;"><div class="fb-like-box" data-href="http://www.facebook.com/tropical879" data-width="470" data-height="300" data-show-faces="true" data-stream="false" data-header="false"></div></div>
	</div>
	<div style="clear:both; height:10px; width:0px;"></div>
	<div style="width:790px; height:160px; float:left;">
 <div class="gradiente" style="width:790px; height:20px;">Player Rádio Tropical</div>
 <div style="width:790px; height:140px; background:#000;"><a href="/player.php"><img src="/img/player/playerbanner.png" class="fade"/></a></div>
	</div>
	<div style="clear:both; height:10px; width:0px;"></div>
	<div style="width:256px; height:220px; float:left;">
 <div class="gradiente" style="width:256px; height:20px;">Mural de Recados</div>
 <div style="width:256px; height:200px; background:#333;"><br/><br/><iframe src="http://www.meumural.com/mural/addmsg.php?id=4676" frameborder="0" width="240px" height="80px" scrolling="no" allowtransparency="true"></iframe><p style="color:#fff; text-align: justify; padding:10px;">Para ver o seu e todos os outros recados do site <a href="/recados.php">clique aqui</a></p></div>
	</div>
	<div style="width:10px; height:220px; float:left;"></div>
	<div style="width:256px; height:220px; float:left;">
 <div class="gradiente" style="width:256px; height:20px;">Contato</div>
 <div style="width:256px; height:200px; background:#333;"><br/><p style="color:#fff; padding:10px; text-align:justify;">Rádio Tropical FM 87,9<br/>Tupi Paulista - SP<br/>CEP: 17930-000<br/>Rua Duque de Caxias n°986, Centro<br/>Fone: (018) 3851-1388<br/>Horário de funcionamento: Segunda a Sexta das 08:00 as 18:00 e aos sábados das 08:00 as 12:00<br/>E-mail: tropicalfm87.9@terra.com</p></div>
	</div>
	<div style="width:10px; height:220px; float:left;"></div>
	<div style="width:256px; height:220px; float:left;">
 <div class="gradiente" style="width:256px; height:20px;">Programação</div>
 <div style="width:256px; height:200px; background:#333;"><img src="/img/programacao/radio.png" style="padding:10px"/><p style="color:#fff; padding:10px; text-align:justify;"><a href="/programacao.php">Clique aqui e confira nossa grade de programação</a></p></div>
	</div>
</div>

<div style="clear:both;"></div>
<div style="width:1005px">
	<?php
 include("_rodape.php");
	?>
</div>
</center>
</body>
</html>

Como podem ver, é algo completamente simples, criei o documento em PHP apenas para usar o Include, mas é puro HTML padrão, o que pode estar acontecendo?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marco Bruno· 28 de jul.

Bom dia, nanerbk8.

Coloca um print ou a URL do site com a quebra de layout, fica mais fácil para te ajudar.

No caso do PNG, no IE6 não tem suporte a o efeito de transparência da imagem sendo ela um PNG.

Fico no aguardo do pirnt ou da URL com a quebra de layout.

Att, Marco Antonio.

William Bruno· 28 de jul.

vamos do começo, valide teu codigo:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.fmtropicalfm.com%2F

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.fmtropicalfm.com%2F

Depois disso prosseguiremos.

Bergs· 28 de jul.

@nanerbk8

segue algumas observações para validação do seu código:

setar caminho dos diretórios corretamente

exemplos:

url(/css/img/arquivo) por url(../img/arquivo) (a imagem sempre está em um diretório acima, dependendo da sua organização)

---------------------------------------------------------

troque os style inline por class e id nas tags

---------------------------------------------------------

não use tags depreciadas como a <center> use o css para centralizar o layout

---------------------------------------------------------

Nas CSS3 use o piecss para validar no IE ou então use imagens.

--------------------------------------------------------

Observe os seletores css eles funcionam em hierarquia o famoso estilo em cascata.

(O que você coloca no final do estilo pode está invalidando o que tinha feito na parte superior)

-------------------------------------------------------

Tenha um bom trabalho :thumbsup: