Problema com CSS em navegadores diferentes

16 de julho de 2012 7 respostas

LucasAdri07 16 de julho de 2012

Olá pessoal, estou com o seguinte problema.

Tenho esse CSS, ele é bem antigo e estou fazendo modificações nele pra adaptar pra outros navegadores, já que na época que ele foi desenvolvido só havia IE e Netscape.

/* Página de Menu */
  .menu           {
                  font-family: Verdana;
                  font-size: 10px;
                  border-top: 1px solid #DEE3E7; /* #CCCCCC */
				  border-bottom: 0px;
				  height: 100%;
				  width: 100%;
                  }

  .menu font , .menu font a
                  {
                  font-size: 10px;
                  font-weight: bold;
                  color: #333333;
                  height: 20px;
                  padding-left: 3px;
                  padding-top: 3px;
                  padding-bottom: 3px;
				  cursor: hand;
                  }

  .menuNivel1 {
	width: 100%;
	background-color: #EFEFEF;
  }

 .menuNivel1,
 .menu a {    
    &lt;!--[if !IE]&gt; --&gt;
	line-height:19px; /* Outros */
	&lt;!--[endif]--&gt;
    &lt;!--[if IE]&gt;
	height:12px; /* IE */
	&lt;![endif]--&gt;
	
	}

  .menu a         {
  				  
                  color: #3252DD;
                  width: 100%;
                  border-bottom: 1px solid #DEE3E7; /* #CCCCCC */
                  padding-left: 10px;
                  padding-top: 3px;
                  padding-bottom: 3px;
                  }

  .menu a:hover   {
                  color: #FFFFFF;
                  background-color: #0066FF;
                  }

  .menuSeta       {
                  font-size: 30px;
				  font-family: MS Sans Serif, Verdana;
				  text-align: center;
				  color: #006699;
				  /*behavior: url("/js/menu.htc"); /**/
				  background: #DEE3E7; /* #C0C0C0 */
				  border-top: 1px #FFFFFF solid;
				  border-left: 1px #FFFFFF solid;
				  border-bottom: 1px #98AAB1 solid; /* #808080 */
				  border-right: 1px #98AAB1 solid; /* #808080 */
				  padding-top: 1px;
				  padding-left: 1px;
				  padding-bottom: 1px;
				  padding-right: 1px;
				  }

  .menuSetaDown   {
				  border-top: 1px #DEE3E7 solid; /*#98AAB1*/
				  border-left: 1px #DEE3E7 solid; /*#98AAB1*/
				  border-bottom: 1px #DEE3E7 solid; /* #FFFFFF #808080 */
				  border-right: 1px #DEE3E7 solid; /* #FFFFFF #808080 */
				  padding-top: 2px;
				  padding-left: 2px;
				  padding-bottom: 0px;
				  padding-right: 0px;
  				  }

@import url(/especifico/css/menu.css);

O meu problema está nessa parte:

.menuNivel1,
 .menu a {    
    &lt;!--[if !IE]&gt; --&gt;
	line-height:19px; /* Outros */
	&lt;!--[endif]--&gt;
    &lt;!--[if IE]&gt;
	height:12px; /* IE */
	&lt;![endif]--&gt;
	
	}

Tenho que fazer esse line-height:19 para os navegadores que não forem IE.

E o height:12px é quando se usa o IE.

O problema é que ele não está sendo aplicado nos outros navegadores que não sejam o IE, e todos estão pegando a configuração de height:12px;

Alguem teria alguma idéia de como resolver isso?

Grato, Lucas

7 Respostas

drsmachado 16 de jul. de 2012

Crie normalmente a regra para não IE e, apenas sobrescreva caso seja IE.

.menu a {      
   line-height:19px; /* Outros */    
}  
<!--[if IE]>  
.menu a{
   height:12px; /* IE */  
}
<![endif]-->

LucasAdri07 16 de jul. de 2012

drsmachado:

Crie normalmente a regra para não IE e, apenas sobrescreva caso seja IE.

.menu a {      
   line-height:19px; /* Outros */    
}  
<!--[if IE]>  
.menu a{
   height:12px; /* IE */  
}
<![endif]-->

Resolveu meu problema.

Muito obrigado ^^

drsmachado 16 de jul. de 2012

Uma outra opção seria verificar qual browser via javascript e, então, usando DOM, definir a propriedade.
Para isso, no evento onload da tag body, você deveria chamar uma função que realizasse essa verificação e executasse a configuração.

LucasAdri07 16 de jul. de 2012

drsmachado:
Uma outra opção seria verificar qual browser via javascript e, então, usando DOM, definir a propriedade.
Para isso, no evento onload da tag body, você deveria chamar uma função que realizasse essa verificação e executasse a configuração.

Então… eu cheguei a fazer uma verificação com javascript pra ver qual navegador estava usando e por incrivel que pareça, a verificação acusou que eu estava usando IE sendo que estava no Chrome, já no Firefox ele mostrou que eu estava usando um navegador diferente do IE, por isso não cheguei a usar essa solução.

Mas por esse modo no CSS ja resolveu meu problema.

drsmachado 16 de jul. de 2012

LucasAdri07:
drsmachado:
Uma outra opção seria verificar qual browser via javascript e, então, usando DOM, definir a propriedade.
Para isso, no evento onload da tag body, você deveria chamar uma função que realizasse essa verificação e executasse a configuração.

Então… eu cheguei a fazer uma verificação com javascript pra ver qual navegador estava usando e por incrivel que pareça, a verificaçã o acusou que eu estava usando IE sendo que estava no Chrome, já no Firefox ele mostrou que eu estava usando um navegador diferente do IE, por isso não cheguei a usar essa solução.

Mas por esse modo no CSS ja resolveu meu problema.

Estranho, normalmente Chrome é identificado como Netscape…
Ao menos em scripts que validam navegadores que eu uso para brincar com ajax.
Não lembro agora, mas aquela verificação que passei tem algumas variantes, que permitem “gambiarrar” o CSS para versões diferentes de IE.
Se der uma pesquisada, vai achar, com certeza.

LucasAdri07 16 de jul. de 2012

drsmachado:
LucasAdri07:
drsmachado:
Uma outra opção seria verificar qual browser via javascript e, então, usando DOM, definir a propriedade.
Para isso, no evento onload da tag body, você deveria chamar uma função que realizasse essa verificação e executasse a configuração.

Então… eu cheguei a fazer uma verificação com javascript pra ver qual navegador estava usando e por incrivel que pareça, a verificaçã o acusou que eu estava usando IE sendo que estava no Chrome, já no Firefox ele mostrou que eu estava usando um navegador diferente do IE, por isso não cheguei a usar essa solução.

Mas por esse modo no CSS ja resolveu meu problema.

Estranho, normalmente Chrome é identificado como Netscape…
Ao menos em scripts que validam navegadores que eu uso para brincar com ajax.
Não lembro agora, mas aquela verificação que passei tem algumas variantes, que permitem “gambiarrar” o CSS para versões diferentes de IE.
Se der uma pesquisada, vai achar, com certeza.

Tem sim, é só colocar exemplo <!–[if IE 6]> <!–[if IE 7]> e por ai vai.

LucasAdri07 16 de jul. de 2012

Surgiu mais um problema que ja não é no CSS.

Tem um banner em flash no rodapé do site, que está em uma pagina e está sendo chamado assim:

Essa pagina banners.asp é a seguinte:

&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
	 width="180" height="40" id="Ultramax" align=""&gt;
	 &lt;param name=movie value="/ImagensEsp/Ultramax.swf"&gt; &lt;param name=quality value=high&gt; &lt;param name=bgcolor value=#FFFFFF&gt; &lt;embed src="Ultramax.swf" quality=high bgcolor=#FFFFFF  width="250" height="60" name="Ultramax" align=""
	 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/embed&gt;
	&lt;/object&gt;

O banner em flash só aparece no IE, e em outros navegadores não…

Ja tentei trocar o INCLUDE virtual por INCLUDE file e mesmo assim não funcionou.

Existe alguma incompatibilidade desse tipo de codificação com navegadores que não sejam IE?

Criado 16 de julho de 2012

Ultima resposta 16 de jul. de 2012

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados