Ir para conteúdo

Arquivado

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

robertocsp

box nao fica com menos de 20px no IE

Por , em Desenvolvimento frontend

Recommended Posts

robertocsp    0

robertocsp
Postado

Pessoal,

 

estou precisando fazer um box com 300px de largura por 12px de altura. Aparentemente é ridicularmente simples, mas se tratando de ter que funcionar no IE...

 

A questão é que o IE 6 não está "respeitando" a altura de 12px que estou dando para a div, ficando com 20px, e realmente preciso que tanto no IE 6 quanto no firefox 1.5.10 o box tenha 12px.

Estou colando o código abaixo para ver se alguém pode me ajudar.

 

XHTML:

 

<!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" lang="pt-br" xml:lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="teste_box.css" type="text/css" /><title>Teste - Box com 12px de altura</title></head><body><div></div></body></html>

CSS:

 

*{	padding:0;	margin:0;}div{	width: 300px;	height:12px;	background:Blue;}

PS: caso não consigam visualizar a diferença entre o firefox e o IE mde o height para 3px.

 

Desde já agradeço,

Roberto Costa

Compartilhar este post

Link para o post
Compartilhar em outros sites

robertocsp    0

robertocsp
Postado

Pessoal,

 

estou precisando fazer um box com 300px de largura por 12px de altura. Aparentemente é ridicularmente simples, mas se tratando de ter que funcionar no IE...

 

A questão é que o IE 6 não está "respeitando" a altura de 12px que estou dando para a div, ficando com 20px, e realmente preciso que tanto no IE 6 quanto no firefox 1.5.10 o box tenha 12px.

Estou colando o código abaixo para ver se alguém pode me ajudar.

 

XHTML:

 

<!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" lang="pt-br" xml:lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="teste_box.css" type="text/css" /><title>Teste - Box com 12px de altura</title></head><body><div></div></body></html>

CSS:

 

*{	padding:0;	margin:0;}div{	width: 300px;	height:12px;	background:Blue;}

PS: caso não consigam visualizar a diferença entre o firefox e o IE mde o height para 3px.

 

Desde já agradeço,

Roberto Costa

Compartilhar este post

Link para o post
Compartilhar em outros sites

robertocsp    0

robertocsp
Postado

Desculpe, mas nao foi com esta intenção .. eu tentei editar o minha mensagem para alterar o titulo, mas como a ferramenta não a habiliotu para edição eu voltei com comando do browser e quando postei novamente minha mensagem se duplicou.Att,Roberto

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, meu caro robertocsp, eu não pûde testar no Firefox, pq onde estava qdo li seu tópico só tinha IE6... Vamos aos fatos:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 1º - Nunca deixe as DIVs vazias... Tá, você talvez tenha deixado para mostrar como exemplo aki, mas não custa nada relembrar... Use pelo menos um  ...

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 2º - Testando no meu IE6 aki, adicionei a propriedade overflow: hidden à sua DIV... Pelo menos aki no IE6 funcionou legal... Falta testar se há diferença no FF ou qq outro browser...

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 3º - A propriedade background só deve ser utilizada caso você possua duas ou mais propriedades q envolva um plano de fundo... Ela serve justamente para "encurtar" o número de declarações... Não sei se isso é realmente errado de se fazer, mas eu interpreto isso como algo não mto semântico... Por exemplo, você declararia uma cor de fundo e uma imagem de fundo, além do tipo de repetição da imagem e posição da mesma... Aí sim você pode utilizar o background e colocar td junto, sem a necessidade de declarar cada uma dessas propriedades separadamente... Pq se não você teria:

div {	background-color: #00f;	background-image: url(imagem.gif);	background-repeat: no-repeat;	background-position: 0 0;}
Meio grandinho né? Por isso existe a propriedade background... Pois ficaria dessa forma:

div {	background: #00f url(imagem.gif) no-repeat 0 0;}
Bom, não sei se você já conhece essa parte, mas é só pra relembrar...

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif 4º - Eu ainda arrisco um palpite para tentar entender esse erro no IE... Acredito q o browser em questão configura q uma DIV deve ter algum conteúdo, no mínimo, um   como mencionei... Como esse caracter especial é um caracter mesmo, então ele deve receber a formatação do texto de sua página... Se você não declarou nada envolvendo formatação de texto, o   então acaba adquirindo a formatação padrão do browser, q além da propriedade font-size q ele recebe, deve tb receber um valor para line-height padrão, q normalmente é sempre maior do q o tamanho da fonte... Vamos supor q o tamanho padrão de fonte do IE6 seja, em pixels, 12... E o line-height acaba recebendo um valor de 20px, por exemplo... Então, acredito eu, não é confirmado isso, q msm q você não colocou nada dentro da div, ele acaba interpretando q ali tenha alguma coisa e q acabe recebendo essas configurações... Por isso, use a propriedade overflow: hidden, q vai "esconder" tudo o q exceder os limites da div...

 

 

Ok? E testa lá a dica q te passei e vê se funciona direitinho... Um abraço!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Até um ano atrás eu tinha esse problema tb e isso me irritava, pois eu não encontrava nada que falasse sobre o assunto, só que eu percebia que mesmo deixando a div vazia o IE teimava em deixar um espaço em branco, dai eu acabei vendo que o que ele faz é deixar a div com o tamanho (height) da fonte, exatamente como o Tarso falou, ai coloquei um font-size de 1px e pronto a porcaria do IE deixou fazer uma div com 6px de height.PS: Eu adoro o IE ¬¬.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Que bom que o problema foi resolvido robertocsp, se precisar de ajuda, por favor, volte a postar!

 

[]´s

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