Estou tendo um probleminha de conflito entro o Doctype e um Script.
O que acontece é que as páginas do site não tinham Doctype e para a implementação de um slide, tive que incluí-lo, porém ele afetou o comportamento de um Script que redimensiona um banner de acordo com a resolução utilizada, o Banner fica "esticado" verticalmente. Isto ocorre somente quando o site é visualizado no IE...
<!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">
O Script:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
#Topo_tema {
width:100%; /* Largura fixa para a div */
margin-left: 5px;
margin-right: 5px;
min-height:120px; /* Altura mínima */
height:auto !important; /* Altura ajustável de acordo com o conteúdo */
height:120px; /* Altura mínima para IE */
background-image: url("config/imagens_conteudo/padrão/Topo_tema02.jpg");
background-size:100% 100%; /* Imagem ocupando toda largura e altura da div */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;
-moz-background-size: 100% 100%;
}
#Topo_tema img.bg {
display:none; /* Escondemos a imagem que está no HTML dos navegadores que suportam CSS3 */
}
</style>
<!--[if IE]>
<style type="text/css">
#Topo_tema {
background:none; /* Esconde a imagem que está no CSS do IE */
}
#Topo_tema img.bg {
display:block; /* Mostra a imagem que está no HTML */
z-index:-1; /* Coloca ela atrás do conteúdo */
position:absolute; /* Faz a imagem não interferir no conteúdo */
width:100%; /* Imagem ocupando toda largura da div */
height:100%; /* Imagem ocupando toda altura da div */
}
</style>
<![endif]-->
Question
Rafael Wojcik
Olá Pessoal,
Estou tendo um probleminha de conflito entro o Doctype e um Script.
O que acontece é que as páginas do site não tinham Doctype e para a implementação de um slide, tive que incluí-lo, porém ele afetou o comportamento de um Script que redimensiona um banner de acordo com a resolução utilizada, o Banner fica "esticado" verticalmente. Isto ocorre somente quando o site é visualizado no IE...
Alguém tem uma idéia do que pode ser? Segue link para a página: http://www.casadomontanhista.com.br/default2.asp
O Doctype:
O Script:<script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> #Topo_tema { width:100%; /* Largura fixa para a div */ margin-left: 5px; margin-right: 5px; min-height:120px; /* Altura mínima */ height:auto !important; /* Altura ajustável de acordo com o conteúdo */ height:120px; /* Altura mínima para IE */ background-image: url("config/imagens_conteudo/padrão/Topo_tema02.jpg"); background-size:100% 100%; /* Imagem ocupando toda largura e altura da div */ -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; -moz-background-size: 100% 100%; } #Topo_tema img.bg { display:none; /* Escondemos a imagem que está no HTML dos navegadores que suportam CSS3 */ } </style> <!--[if IE]> <style type="text/css"> #Topo_tema { background:none; /* Esconde a imagem que está no CSS do IE */ } #Topo_tema img.bg { display:block; /* Mostra a imagem que está no HTML */ z-index:-1; /* Coloca ela atrás do conteúdo */ position:absolute; /* Faz a imagem não interferir no conteúdo */ width:100%; /* Imagem ocupando toda largura da div */ height:100%; /* Imagem ocupando toda altura da div */ } </style> <![endif]-->Abraços!
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.