Ir para conteúdo

POWERED BY:

Arquivado

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

André.Sniper

linha separando 2 divs com background

Recommended Posts

Boa tarde Pessoal, vim aqui mais uma vez para sanar uma dúvida cruel, é o seguinte estou criando um layout onde preciso q as duas imagens do background se junte perfeitamente, só q no IE 6.0 ele por algum motivo q não entendo fica faltando 1 px em cima e 1px em baixo, criando assim uma linha divisoria, tou quase colocando uma tabela pra resolver isso, poxa da o maior trabalho coloca as coisas perfeitas no IE 6.0, quando esses desenvolvedores vão se adequar as regras.

<div id="total"><div id="topo"><p><img src="imagens/home_botao.gif" title="Página Inicial" alt="Página Inicial" /><img src="imagens/mapa_botao.gif" title="Mapa do site" alt="Mapa do site" /><img src="imagens/contato_botao.gif" title="Fale Conosco" alt="Fale Conosco" /></p></div><div id="banner"><div id="esquerda"><p><img src="imagens/logotipo.gif" alt="Unidade MK Brasil." /></p><p id="area_restrita"><!--aqui fica o restante da imagem em background--></p></div></div></div>

 

* {	margin: 0px;	padding: 0px;}body {	text-align: center;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #666666;	margin: 0px;	padding: 0px;}img {	margin: 0px;	padding: 0px;}#total {	width: 770px;	background-color: #FADDDD;	height: 400px;	margin-right: auto;	margin-left: auto;}#topo {	background-image: url(../imagens/topo.gif);	background-repeat: no-repeat;	background-position: center bottom;	padding-right: 30px;	text-align: right;	padding-top: 18px;	height: 20px;	background-color: #FFFFFF;}#banner {	text-align: left;}#area_restrita {	height: 60px;	width: 330px;	background-image: url(../imagens/area_restrita.gif);	background-position: left top;}#topo img {	margin-left: 20px;}[if lte IE 6]><style>.gainlayout { height: 1px; }</style><![endif]

Compartilhar este post


Link para o post
Compartilhar em outros sites

Putz... Eu até tentei analisar André.Sniper, mas seu código tem mta coisa desnecessária e tb apresenta alguns erros...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Faltou fechar a div "total"...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Se você ainda não colocou a propriedade "alt" de algumas imagens, não esqueça depois então...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Para que colocar as imagens dentro de um <p>? Além das imagens, o <form> tb...

Bom, assim... Tá mto "sujo" seu código... Não consegui encontrar uma solução... Tente deixar o código mais limpo e legível...

 

Boa sorte!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia Paulo,

 

Bem a respeito das tags q você se referiu, não são relevantes, pois o problema está numa div que não possui imagem alguma, a imagem é fundo (background), e sobre o fechamento da tag "total", isso já foi feito só q está local, mas tbm não fez diferença alguma, e sobre colocar tag <p> antes e depois da <img> é que aprendi assim, pelo fato da <img> ser um elemento de linha deve ser colocado entre <p> para configurar um elemento de bloco, mas isso tbm não é o motivo do problema e a <p> antes do form, realmente é desnecessário, já tirei só q não fiz upload pois não altera em nada, a os atributos alt nas imagens não tem por q elas serão substituidas por arquivos .swf, o erro está na div "area restrita" o IE 6.0 não completa o fundo, fica faltando 1px em cima e em baixo, aparecendo o fundo da div "total", e esse problema é só no IE 6 em qualquer outro browser não aparece, a imagem se encaixa perfeitamente. abaixo está o codigo de que falo.

 

<div id="area_restrita"><form action="#" enctype="multipart/form-data" method="post">Login: <input style="width:100px" type="text" /> Senha: <input type="password" style="width:80px" /></form>

 

Provavelmente isso deve ser corrigido com um hack, mas nõ sei como faze-lo.

 

Obs: A fonte do q falei sobre <p> antes de <img> está no livro XHTML e CSS do serie "use a cabeça"

 

Obrigado pela atenção!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.