Ir para conteúdo

POWERED BY:

Arquivado

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

FabianoSouza

Largura de texto diferente entre IE (10) e Chrome

Por , em Desenvolvimento frontend

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

Pessoal, vejam a imagem anexa.

 

Fica com largura de texto levemente diferente nos navegadores, o que faz o layout estourar no Chrome. Vejam o espaço no final da imagem.

Quero saber se tem algo que possa fazer no CSS para contornar isso. Vale dizer que o texto abaixo dos ícones está estilizado. Mas ainda assim...

 

layout.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Somente vendo o código para ver certinho o que está de errado! Você pode postar o endereço do site o código desta área do site aqui. Por hora, veja se possui o Reset para gerar o padding e o margin de todos os elementos. Veja também se está usando o Doctype correto. Pois o seu problema é a renderização!

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Olá Nícolas. Vou postar sim. Mas antes me diga uma coisa. O Doctype que falou se refere a que exatamente?

 

Seria esta linha que vai logo no início da página?

 

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

 

Todas as páginas do site seguem este "padrão"

 

 

 

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sem título</title>

</head>

 

<body>

</body>

</html>

 

 

 

 

 

 

Nícolas, segue link da página em que está dando problema. Removi alguns elementos para facilitar o entendimento.

 

link da página

 

 

Tem uns estilos feitos na própria página...depois vou passa para o arquivo de CSS...não repare heheh

 

Valew!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Não achei problema nenhum no Internet Explorer nem no Chrome, acho que o problema está quando o menu inteiro está presente como está na Imagem. Poste todo o menu como está na imagem. Raparei que seu código é bem confuso e desorganizado. Assim que você postar vou tentar procurar o erro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Ah sim...o código está bem desorganizado mesmo. Isso tem uma razão: não sou programador...então não manjo muito das técnicas e metodologias...estou me aventurando e tentando aprender com os colegas do fórum hehe

 

 

Bom, no final das contas o problema gira em torno desta diferença. No Chrome o texto fica mais longo

render.jpg

A questão está na forma de que cada navegador renderiza. Olhei os sites profissa como UOL e Terra. Nota-se uma pequena diferença no espaçamento de texto nos dois navegadores.

 

 

Conclusão. Não há erro de CSS (embora o meu esteja beeem desorganizado heheh).

 

Suponho então que o "pulo do gato" seja manter uma margem de segurança pois sabe-se que no Chrome, Opera, Safari e Firefox o texto é renderizado de forma mais espaçada do que no IE

 

:-0

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

O problema do seu layout é a renderização do documento pelos browsers. Este problema é notado principalmente em textos, acontece que o Chrome o InternetExplorer utilizam formatos de fontes diferentes, o que pode acontecer é de o cálculo não ser preciso e ocasionar problema como o teste que fiz abaixo.

 

21431310.png

 

Mas o principal fato de seu layout "quebrar" é pelo largura(width) estar definida como 100%. Um elemento estilizado com largura 100% (elemento fluído) sempre alcançará a máxima largura.

 

Digamos que minha resolução é de 1366x768. Então, como meu browser maximizado, sem barra de rolagem, terá o tamanho, em elemento fluído, de 1366 de largura.

 

Voltamos ao seu caso... Seu layout tem um tamanho mínimo, veja:

 

69722769.png

 

É a soma to tamanho das imagens, textos, paddings e margins(visto nos quadros vermelho). A medida que vamos diminuindo o tamanho da janela do navegador os elementos "flotados" tendem a se aproximar, ou seja, o menu menor com apenas dois icones vai se aproximando do menu maior, pois aquele espaço em branco está vazio. Como o menuzinho está floatado a right ele tende a continuar, porém a área de distância entre os dois menus vai diminuindo.

Logo quando passa do tamanho mínimo o layout "quebra", pois como tamanho é fluído não cria um scroll horizontal.

 

A solução para seu problema é usar a propriedade min-widht que irá definir um tamanho mínimo para seu layout, após este tamanho irá criar um scroll horizontal. Tente por no seu código:

 

#barra_nav_sup
{    
min-width: 1024px;	
}

Não sei exatamente se o tamanho mínimo é 1024px, porém foi o mais próximo que identifiquei! Essa seria uma solução, mas caso você gostaria de deixar o layout fluído podes ler mais sobre media query.

 

Espero ter ajudado, não sei se expliquei bem!

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Opa! Ajudou bastante sim. Preciso fazer uma faxina no meu CSS e melhorar meus códigos.

 

Se tiver algum material sobre Media Queries em Português, pode mandar.

 

 

Muito obrigado, Nícolas.

 

 

 

Abs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Pelo que pude notar pelo seu código, ainda estas a aprender XHTML e CSS. Então acho interessante você aprender bastante sobre CSS2 para depois avançar para o CSS3 e construir sites responsivos(que se adaptam a qualquer resolução). Por hora acho que deves deixar seu projeto como layout estático, fixo. Logo após estudar mais sobre CSS2 podes consultar o Sr. Google sobre Design Reponsivo. Para isto aconselho um livro: Web Design Responsivo: Páginas adaptáveis para todos os dispositivos

 

Tente seguir está ordem para não se perder. Se ainda ficou alguma dúvida sobre minha explicação do post anterior, podes perguntar, pois não seu se expliquei como eu gostaria!

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