2 divs q só ficam errado no Ie 6

André.Sniper · Abril 3, 2007

Boa tarde a todos,

Bem estou criando um novo layout com duas divs para dividir o mesmo, um para coluna esquerda e outra para coluna central, só q no IE 6 fica uma diferença entre as divs de uns 3px já tentei de tudo, mas nada mudou, abaixo segue o codigo:

<!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>Untitled Document</title><link href="script/estilo.css" type="text/css" rel="stylesheet" /></head><body><div id="total"><!--toda a página 770px--><div id="topo01"><!--topo01 da pagina com 744px e 20px height--></div><!--final do topo01--><div id="coluna_esquerda"><!--inicio da coluna esquerda 260px--><p><img src="imagens/logotipo.jpg" height="170" width="260" alt="SaneRio Engenharia" title="SaneRio Engenharia" /></p><div id="menu"><ul><li class="imagem_menu"><strong>Menu de Navegação</strong></li><li><a href="#">Página Inicial</a></li><li><a href="#">Áreas de Atuação</a></li><li><a href="#">Principais Obras</a></li><li><a href="#">Clientes</a></li><li><a href="#">Contato</a></li><li><a href="#">Informativo</a></li></ul></div><div id="selo_prefeitura"><p><img src="imagens/imagem02.jpg" /></p><p><span class="titulo">SaneRio</span> recebe o selo "Empresa Solidária" concedido pela Prefeitura da Cidade do Rio de Janeiro, por sua atuação junto à comunidade desta cidade.<span class="link"><a href="#">Saiba mais</a></span> </p></div></div><!--final da coluna esquerda--><div id="colunacentral"><p><img src="imagens/imagem_banner.jpg"  /></p></div><div id="rodape"></div></div><!--final da pagina 770px--></body></html>

Agora o cod CSS

body {	margin: 0px;	padding: 0px;	background-color: #DDEEF7;	font-family: "Trebuchet MS", Verdana, sans-serif;	font-size: 12px;	color: #666666;}div {	margin: 0px;	padding: 0px;}img {	margin: 0px;	padding: 0px;}p {	margin: 0px;	padding: 0px;}* {	margin: 0px;	padding: 0px;}.titulo {	font-weight: bold;}.link a {	background-image: url(../imagens/saibamais.gif);	background-repeat: no-repeat;	background-position: left center;	padding-left: 15px;	text-decoration: none;	color: #FFB600;}.link a:hover {	text-decoration: none;	border-bottom-width: 1px;	border-bottom-style: dotted;	border-bottom-color: #FFB600;	background-image: url(../imagens/saibamais.gif);	background-repeat: no-repeat;	background-position: left center;}#total {	width: 770px;	background-color: #FFFFFF;	background-image: url(../imagens/lateral_fundo.gif);	background-repeat: repeat-y;	background-position: right top;}#topo01 {	margin-right: 26px;	height: 20px;	background-color: #4DA7FF;}#coluna_esquerda {	width: 260px;	float: left;	background-color: #EAEAEA;	background-image: url(../imagens/coluna_esquerda_fundo.gif);	background-repeat: repeat-y;	background-position: left center;	margin-bottom: 20px;	padding-bottom: 10px;	margin-top: 0px;	margin-right: 0px;	margin-left: 0px;}#menu {	margin: 0px;	padding: 0px;}#menu ul {	padding: 0px;	margin-top: 0px;	margin-right: 10px;	margin-bottom: 0px;	margin-left: 20px;}#menu ul li {	display: block;	list-style-type: none;	padding: 5px;	border-bottom-width: 2px;	border-bottom-style: groove;	border-bottom-color: #FFFFFF;}#menu ul li a {	text-decoration: none;	display: block;	color: #666666;}#menu ul li a:hover {	background-color: #4DA7FF;	color: #FFFFFF;}#selo_prefeitura {	text-align: center;	margin-top: 10px;	border: 1px solid #CCCCCC;	margin-right: 10px;	margin-left: 20px;	background-color: #DDEEF7;	padding-top: 10px;	padding-right: 5px;	padding-bottom: 10px;	padding-left: 5px;}#selo_prefeitura img {	border: 1px solid #CCCCCC;	padding: 5px;	background-color: #FFFFFF;}#colunacentral {	width: 484px;	margin-left: 260px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}#rodape {	clear: left;	height: 50px;	border-top-width: 2px;	border-top-style: solid;	border-top-color: #4DA7FF;	margin-right: 26px;}[if lte IE 6]> <style> .gainlayout { height: 1px; } </style> <![endif]

Paulo de Tarso F. M. · Abril 4, 2007

André.Sniper, não tem como colocar uma imagem mostrando onde está o erro? Tentei analisar aki, mas num consegui... E esse exemplo, naum tem disponível em algum link?

webflex · Abril 4, 2007

Olá,

Amigo André.Sniper , eu fiz umas alterações no seu código, mas espero que seja isto que queria:

body {

margin: 0px;

padding: 0px;

background-color: #DDEEF7;

font-family: "Trebuchet MS", Verdana, sans-serif;

font-size: 12px;

color: #666666;

}

div {

margin: 0px;

padding: 0px;

}

img {

margin: 0px;

padding: 0px;

}

p {

margin: 0px;

padding: 0px;

}

* {

margin: 0px;

padding: 0px;

}

.titulo {

font-weight: bold;

}

.link a {

background-image: url(../imagens/saibamais.gif);

background-repeat: no-repeat;

background-position: left center;

padding-left: 15px;

text-decoration: none;

color: #FFB600;

}

.link a:hover {

text-decoration: none;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #FFB600;

background-image: url(../imagens/saibamais.gif);

background-repeat: no-repeat;

background-position: left center;

}

#total {

width: 770px;

background-color: #FFFFFF;

background-image: url(../imagens/lateral_fundo.gif);

background-repeat: repeat-y;

background-position: right top;

}

#topo01 {

margin-right: 26px;

height: 20px;

background-color: #4DA7FF;

}

#coluna_esquerda {

width: 260px;

float: left;

background-color: #EAEAEA;

background-image: url(../imagens/coluna_esquerda_fundo.gif);

background-repeat: repeat-y;

background-position: left center;

padding-bottom: 10px;

margin: 0 0 20px 0;

}

#menu {

margin: 0px;

padding: 0px;

}

#menu ul {

padding: 0px;

margin: 0 10px 0 20px;

}

#menu ul li {

display: block;

list-style-type: none;

padding: 5px;

border-bottom-width: 2px;

border-bottom-style: groove;

border-bottom-color: #FFFFFF;

}

#menu ul li a {

text-decoration: none;

display: block;

color: #666666;

}

#menu ul li a:hover {

background-color: #4DA7FF;

color: #FFFFFF;

}

#selo_prefeitura {

text-align: center;

margin: 10px 10px 0 20px;

border: 1px solid #CCCCCC;

background-color: #DDEEF7;

padding: 10px 5px;

}

#selo_prefeitura img {

border: 1px solid #CCCCCC;

padding: 5px;

background-color: #FFFFFF;

}

#colunacentral {

float: left;

width: 482px;

}

#rodape {

clear: left;

height: 50px;

border-top-width: 2px;

border-top-style: solid;

border-top-color: #4DA7FF;

margin-right: 26px;

}

[if lte IE 6]>

<style>

.gainlayout { height: 1px; }

</style>

<![endif]

Espero ter ajudado, depois diga qualquer coisa.

Cumps [*]

André.Sniper · Abril 4, 2007

Se ajudou? resolveu os meus problemas muito obrigado!!!!Já aproveitando, gostaria de saber se você sabe como colocar uma imagem embaixo da outra sem criar aquele espaço entre elas no IE 6.0, o único q cria esses problemas.Abraços e muito obrigado!!!Reverencias sabio GURU!!!!

webflex · Abril 4, 2007

Olá,

Amigo André.Sniper, suponho que seja isto que esteja-se a referir.. -> http://www.webphlex.com/teste/teste.html <-, veja o código fonte ;).

Quem me dera ser GURU xD, talvez um dia :P.

Cumps [*]

André.Sniper · Abril 4, 2007

Deu uma olhada no script q você me indicou, mas não é recomendado q coloquemos as imagens dentro de uma tag p. exemplo: <p><img src="#" /></p>, é assim q sempre faço.Abraços!!!

webflex · Abril 4, 2007

Olá,

Recomendado acho que não é amigo, você coloca a tag <img> onde quiser :).

Cumps [*]

André.Sniper · Abril 5, 2007

Olá,

Recomendado acho que não é amigo, você coloca a tag <img> onde quiser .

Cumps [*]

De acordo co o livro q li deve se colocar as <img> dentro de tags <p> para ser validado no strict, o livro foi o da O'REILLY.

Abraços!!!

webflex · Abril 5, 2007

Olá,

Ok então fico a saber mais uma coisita :P.

Cumps [*]

Arquivado

2 divs q só ficam errado no Ie 6

Recommended Posts

André.Sniper 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André.Sniper 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André.Sniper 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André.Sniper 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante