Ir para conteúdo

POWERED BY:

Arquivado

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

jaidelson

Diferenças entre IE e Firefox

Por , em Desenvolvimento frontend

Recommended Posts

jaidelson    0

jaidelson
Postado

Olá pessoal!

Continuando meus estudos sobre CSS e sabendo que tem diferenças entre IE e Firefox, gostaria de encontrar um meio termo para a visualização nos dois browsers.

Eis o código que estou fazendo (e novidade, sem olhar em nenhum tutorial, apenas usando o que aprendi, com erros e acertos):

 

<!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=iso-8859-1" /><title>Estudo de DIVs</title><style type="text/css">#topo1{	width: 220px;	height: 100px;	float: left;	padding-left: 10px;}#menu1{	width: 555px;	float: right;	height: 30px;	margin-top: 70px;	background-color: #6B6B2E;}#principaltopo{width: 100%;height: 90px;border-color:#FFCC00;border-bottom-style: double;background-color: #FFFF00;}body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #FFFFCC;}</style></head><body><div id="principaltopo"><div id="topo1">Content for  id "topo1" Goes Here</div><div id="menu1">Content for id "menu1" Goes here</div></div></body></html>
Vejam nos dois browsers e notem a diferença.

Meu objetivo é solucionar a diferença para um meio termo para visualização tanto no IE como no Firefox que não sejam tão gritantes assim.

Enquanto espero a ajuda de vcs vou tentando aqui, quem sabe posso até acertar errando.

 

Valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Browser    0

Browser
Postado

A solução foi dominuir a margem do topo do menu e colocar um hack para que no IE continuasse normal.

Veja ai como ficou:

 

<!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=iso-8859-1" /><title>Estudo de DIVs</title><style type="text/css">#topo1{	width: 220px;	height: 100px;	float: left;	padding-left: 10px;}#menu1{	width: 555px;	float: right;	height: 30px;	margin-top: 60px;	background-color: #6B6B2E;}* html body #menu1{ /* Hacks para IE */	margin-top: 70px;}#principaltopo{width: 100%;height: 90px;border-color:#FFCC00;border-bottom-style: double;background-color: #FFFF00;}body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #FFFFCC;}</style></head><body><div id="principaltopo"><div id="topo1">Content for  id "topo1" Goes Here</div><div id="menu1">Content for id "menu1" Goes here</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Browser    0

Browser
Postado

Concordo com o Bruno, com links facilita mais para solucionar o problema. :)

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