Desativando atributos no CSS conforme browser

[Edkc 0]

Bom, refiz meu site em CSS, sem tabelas, mas pra variar, algumas coisas nao ficaram direito no FF. Ate consegui ajustar de modo que quase fique igual ao que se ve no IE.

 

Acontece que algumas coisas, ainda não ficam direito, então pensei se existe algum modo de escrever o CSS dizendo como agir se o browser for o FF.

 

 

Também queria saber onde encontrar coisas que não funcionam no FF mas funcionam no IE e vice versa.

 

 

 

 

 

* Na galeria do site, coloquei as imagens dentro de divs, e coloquei atributos como borda, imagem de fundo etc sem definir tamanho, e desse modo, nao importa o tamanho da imagem, a moldura se auto-redimensiona. No IE funciona normal, mas no FF, só a altura acompanha a imagem, a largura não. http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

[Guilherme Rambo 4]

Primeiramente, se está bom no IE e ruim no FF quem errou foi você, pois o FF segue (pelo menos mais que o IE) os padrões.

Isso que você quer fazer pode ser feito com hacks, mas eu recomendo que você estude e aprenda a se virar sem hacks http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

 

[]'s

[webflex 0]

Olá,

 

Primeiramente veja este link: Imasters.

Se reparar não existem condicionais para o FF mas sim para o IE, logo algo está mal. Você tem que elaborar seu site de acordo com os padrões web, neste utilizando o FF.

É uma questão de costume, com o tempo vai fazer bons sites.

 

Cumps \o/

[Giovani 104]

Por gentileza, leia o link a seguir:

Como criar um tópico para o seu problema

[Edkc 0]

Mas escrevo o codigo todo, no bloco de notas, não to fazendo o site para o IE, acontece q tem coisa q pela minha logica devia funcionar e não funciona....

 

O q acontece, na pratica é o seguinte: A pagina tem 2 imagens grandes, no codigo html está assim:

 

<div class="imagebox">original			  
			   <div class="versao"><img border="0" src="original.jpg"></div>			   
			   </div>
			   
			   <div class="imagebox">versão 1			   
			   <div class="versao"><img border="0" src="versao1.jpg"></div>			   
			   </div>

Eu não coloco o tamanho da imagem, pq o uso o msmo arquivo htm em varias pastas e as dimensões das imagens são diferentes.

 

No CSS escrevi:

 

.imagebox		 { 
background-image: url('menu_s.jpg'); 
background-repeat:  no-repeat; 
text-align: left; 
font-family: Arial; 
text-transform: uppercase; 
font-size: 10 px; 
margin-bottom: 10px; 
padding-bottom: 8px; 
background-position: right bottom 
}


.versao		{ 
border: 10px solid #EFEFEF 
}

O que acontece é q a borda atribuida em .imagebox, não ajusta sua largura ao tamanho da imagem, só a altura, no FF. Pq isso acontece? Se fosse ambos , largura e altura, teria certeza q era erro meu, algo do tipo "falta informar as dimnesoes, por isso nao renderiza no FF".

[cassiano óliver 1]

faltou " ; " no fim dessas linhas..

border: 10px solid #EFEFEF;

background-position: right bottom;

tem nenhum link pra podermos visualizar esse problema nao?

[webflex 0]

Olá,

 

Acontece que você tem que jogar com as propriedades width e height.

 

Cumps \o/

[Edkc 0]

Então o link é:

 

http://photoshopextreme.orgfree.com/Res/001/index.html

 

Reparem que a borda não acompanha a largura da imagem, enquanto que nas outras acompanham normalmente.

 

http://photoshopextreme.orgfree.com/rest.html

[inforsis 1]

Bom Dia Edkc

Adiciona a propriedade display com o valor table; ao seu seletor vers

 

.vers {
	BORDER-RIGHT: #efefef 10px solid; BORDER-TOP: #efefef 10px solid; BORDER-LEFT: #efefef 10px solid; BORDER-BOTTOM: #efefef 10px solid; [b]display:table;[/b]
}

Faz uma busca aqui no fórum que você irá encontrar um bom material sobre esse detalhe no FF. http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

[Edkc 0]

Ola, ja vi sobre o display:table, valeu!!

[Guilherme Rambo 4]

esse detalhe no FF

Não, esse detalhe no IE. Na verdade o comportamento esperado de um browser é que o elemento pai NÃO aumente de acordo com seus filhos quando estes possuem float. O IE faz isso por padrão, o que é errado.

 

Mas há um detalhe no FF acerca do display:table, pois às vezes ocorre um bug misterioso que ninguém descobriu por que, mas pode ser resolvido assim:

.vers:after {
clear:both;
content:"-";
display:block;
visibility:hidden;
height:1px;
}

PS: resuma seu código e organize-o melhor http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif