Publicado em 6 de jul.

nao funciona no chrome

tenho 2 li's uma com texto e outra com texto e imagem de load, ambas identicas

quando ponho img{vertical-align:middle}, funciona em todos navegadores inclusive o IE, mas nao funciona no chrome, da 1 pixel de altura a mais

e eu achando que o IE era o unico problematico

ha correção pra isso?

Discussão (14)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

brcontainer· 6 de jul.

Poderia colocar um link amigo?

Você zerou o CSS?

Testou no Safari (usa webkit igual ao chrome) e no Opera?

Atensiosamente Silverfox (Guilherme Nascimento)

desisto· 6 de jul.

to rodando localhost - testei apenas no IE, Opera e Chrome

é o seguinte, tenho um li com um botão, quando clica, o bt some, o li continua e entra um spam com load via js... coisa boba, mas quando foi rodar no navegador eu percebi que o alinhamento gerava +1px de altura

span{width:100%; padding:5px 0; font-size:10px; cursor:pointer; display:block}

button{width:100%; padding:5px 0; font-size:10px; cursor:pointer}

<li>button+JS</li>

[]s

brcontainer· 6 de jul.

Teria como enviar o HTML e o CSS para mim via email se assim desejar? Ou posta-los no tópico assim teria mais pessoas para analizar, as vezes não é o navegador e sim a maneira que você fez amigo /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />

desisto· 6 de jul.

vou postar por aqui que é mais rapido /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />

se trocar o button por:

<span class="bt_aaa1">botao</span>

a altura fica imovel como deveria ser

coloquei o JS tb so pra você ver no load, pra não precisar de evento click

a class aaa1 recebe o html com o loader, no IE 7 e 6 vai normal mas no chrome muda a altura

fico no aguardo

/applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />

eu to fazendo e validando no w3 a todo instante, as vezes ficam erros, mas essa etapa estava zerada

brcontainer· 7 de jul.

Tanto no Chrome quanto no Firefox ao receber o HTML depois do click ou do setTimeout ocorreu a perca de 1 pixel e no IE7 ocorreu o aumento de 1 pixel. Tente fazer assim pois o width 100% não é recomendado para todos os elementos:

<html><head><style>body{text-align:left; padding:0; margin:0 30px}{margin:0; border:0; padding:0;list-style-type:none;}.aaa1{ margin-top:10px; border:#D3DEE3 solid 1px; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-transform:uppercase;}.aaa1 button{ width:100%; display:block; padding:5px 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-transform:uppercase; cursor:pointer;}.aaa1 span{ /width:100%; - desnecessario use os elementos como SPAN display:block; apenas*/ display:block; padding:5px 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-transform:uppercase; cursor:pointer;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function(){ $('.aaa1 button').click(function(){ $('.aaa1').html('<span><img src="/loader.gif" height="10" width="30" /></span>'); });});</script></head><body><ul> <li class="aaa1"> <button>botao</button> </li></ul></body></html>Responda estas perguntas importantes:+ está usando qual versão do chrome?

+ está usando windows?

+ está usando qual doctype?

Tente usar o doctype strict

Tente fixar a altura dos elementos principalmente do SPAN e do Button.

Respondendo isto creio que chegaremos ao seu problema amigo /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />

desisto· 7 de jul.

continua dando erro, no Opera +1 e no Chrome +2

+ está usando qual versão do chrome?

+ está usando windows?

+ está usando qual doctype?

1. 4.1.249.1064 (45376)

2. Win XP

3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[]s

incrementei uma ação ao JS

alert($('.aaa1').height())

$('.aaa1').html('<span><img src="/loader.gif" height="10" width="30" /></span>');

alert($('.aaa1').height())

Opera

antes: 22px / depois: 20px

Chrome

antes: 24px / depois: 22px

Evandro Oliveira· 7 de jul.

Desisto, infelizmente existem certas discrepâncias entre a renderização dos navegadores, principalmente com elementos, quando não se trata de texto puro.

A saída é envolver os dois elementos em <span>'s pai, formatados com display: inline-block; e ir ajustando as propriedades line-height, margin e height de forma que os elementos se alinhem a contento.

desisto· 7 de jul.

é, notei isso com o botão, no IE a variação de altura foi pra 29px

preciso implementar em um load onde o botão é substituido pelo load, que por sua vez é retornado ao botão ou uma div de erro

entao seriam os elementos, botao, imagem e texto

você tem um exemplo de como seria isso?

minha area é ASP, de tanto <%%> ja fiquei ruim com CSS

[]s

brcontainer· 7 de jul.

Tentou fixar a altura?

Giovani· 7 de jul.

Eu reparei, algumas semanas atrás que o Chrome tem algumas, pequenas, diferenças mesmo.

No meu caso nada que alterasse tanto o layout /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" class="bbc_emoticon">

desisto· 7 de jul.

1px ja muda a estrutura, pode desalinhar elementos /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />

silver, se fixar altura o texto não fica no meio como usando padding:5 0

Giovani· 7 de jul.

Alguns elementos sim. Não todos!

1px ja muda a estrutura, pode desalinhar elementos /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" class="bbc_emoticon">

Evandro Oliveira· 7 de jul.

>
você tem um exemplo de como seria isso?

pagina.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http-~~-//www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Teste</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" media="all" href="/lib/css/reset.css">
	<link rel="stylesheet" type="text/css" media="all" href="css.css">
	<script type="text/javascript" src="js.js"></script>
</head>

<body>
	<div id="wrapper">
 <span id="loader"><img src="load.gif" alt="carregando..."></span>
 <span id="button"><button>Clique aqui</button></span>
	</div>
</body>
</html>

css.css

#wrapper {
	border: 1px solid #000;
	margin: 5px;
}

#loader, #button {

	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 5px 0;
}

#loader {
	display: none;
}

button {

	border: 1px solid #000;
	font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

button, img {

	height: 15px;
}

img {

	width: 15px;
}

js.js

window.onload = function(){
	document.getElementsByTagName('button').item(0).onclick = function(){
 document.getElementById('loader').style.display = 'inline-block';
 document.getElementById('button').style.display = 'none';
	}
}

javascript equivalente em jquery

$(document).ready(function(){
 $('button:first-child').click(function(){
 $('#loader').css('display','inline-block');
 $('#button').css('display','none');
 });
});

Testado em Firefox4, Chrome6, Opera10.60, IE8 rigorosamente iguais.

desisto· 7 de jul.

obrigado,

vou dar uma estudada