Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafaelwo

Infuência do Doctype em Script

Por , em Desenvolvimento frontend

Recommended Posts

Rafaelwo    0

Rafaelwo
Postado

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: 

<!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/padrao/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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

neste teu caso em específico, o problema está entre o IE e o CSS.

Vou te mover para o fórum adequado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

É exatamente o que o William Bruno falou, o problema está no CSS.

#Topo_tema {
   background-image: url("config/imagens_conteudo/padrao/Topo_tema02.jpg");
   background-size: 100% 100%;
   height: auto !important;
   margin-left: 5px;
   margin-right: 5px;
   min-height: 120px;
   width: 100%;
}

O IE está interpretando background-size: 100% 100%; (principalmente) e width: 100%; como cobrir a página inteira horizontalmente (100%) e verticalmente (100%). Pode ver que a barra de rolagem termina quando o banner é totalmente esticado.

 

Com o IE é complicado mesmo, até na versão mais recente (IE 9) o erro persiste.

 

Sugiro que faça um CSS específico para IE usando comentários condicionais (IF) ou reveja a usabilidade do script utilizado.

 

:seta: http://css-tricks.com/perfect-full-page-background-image/ (se souber adaptar, pode ser útil)

 

Pode tentar determinar também uma largura/altura mínima e máxima, aí a imagem se redimensiona até resolução tal.

 

Redimensionar imagens é complicado mesmo, para os browsers quanto mais específico melhor...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafaelwo    0

Rafaelwo
Postado

Olá Diéssica,

 

Obrigado pela resposta!

Acabei desistindo de manter o banner auto ajustável...

Porém encontrei outro problema...

 

Inseri um slide e para este funcionar eu preciso que a página possua um Doctype, porém ao inserir o doctype, este afeta o comportamento do menu em seu estilo deixando a fonte sublinhada além das categorias que possuem sub-menus não funcionarem.

 

Exemplo: http://www.casadomontanhista.com.br/default2.asp

 

O que poderia ser?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

O problema não é com o doctype e sim com o código.

 

Dei uma olhada pelo Firebug :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito