Ir para conteúdo

POWERED BY:

Arquivado

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

Adair Junior

Problema com margin entre elementos

Recommended Posts

Link do blog: http://testeinfoedu.blogspot.com.

 

Seguinte: como vocês devem ter percebido, quando acaba o texto da postagem, fica sobrando um espaço que não é para sobrar. Já defini no atributo * da CSS valor 0 pra margin e padding, portanto isso não deveria estar acontecendo. Mas até aí tudo bem, eu coloco uma margem negativa no bloco da postagem e resolvo isso – em todos os navegadores, menos no IE. O que eu faço??

 

Segue abaixo folha de estilos e source (com a parte que se refere a esse bloco do HTML):

#post {width: 500px;float: left;clear: left;margin-top: 10px;}#postHeader h2 {width: 472px;height: 33px;background: url(http://i193.photobucket.com/albums/z77/bloginfoedu/beta/post_date.jpg) no-repeat;font: normal normal bold .9em Tahoma;padding: 27px 0 0 28px;}#postBody h2, #postBody h4, #postBody p {width: 444px;background: url(http://i193.photobucket.com/albums/z77/bloginfoedu/beta/p_background.jpg) repeat-y;padding: 0 28px;}#postBody p {padding-bottom: .4em;}.postSign {text-align: right;}#postFooter {width: 500px;height: 30px;background: url(http://i193.photobucket.com/albums/z77/bloginfoedu/beta/post_footer.jpg) no-repeat;}
HTML:

<!-- Corpo das postagens -->			<div id="postBody">				<!-- Título das postagens -->				<a name="<$BlogItemNumber$"></a>				<BlogItemTitle>				<h2><a href="<$BlogItemUrl$>"><$BlogItemTitle$></a></h2>				<h2>Postado <$I18NAtTimeWithPermalink$></h2>				</BlogItemTitle>				<!-- Corpo das postagens -->				<p><$BlogItemBody$></p>				<!-- Comentários (aparecem só na página das postagens) -->				<ItemPage>					<h4>Comentários desta postagem:</h4>					<BlogItemComments>					<a name="<$BlogCommentNumber$>"></a>					<p><$BlogCommentBody$></p>					<p>Por <$BlogCommentAuthor$>, em <a href="#<$BlogCommentNumber$>"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$></p>					</BlogItemComments>				</ItemPage>				<!-- Assinatura das postagens -->				<p class="postSign">Postado pela Margô :: <$BlogItemCommentCount$> Comentário(s)<br />				<a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>>Deixe o seu comentário</a></p>			</div>						<!-- Rodapé das postagens -->			<div id="postFooter">			</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Encontrando o problema:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Abra o link que você deixou: http://testeinfoedu.blogspot.com

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Acesse o código fonte e vá para a linha 154 (pressione Ctrl+L).

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Lá no final dela, você tem o seguinte código:

<div style="clear:both; padding-bottom:0.25em"></div>
Remova a propriedade padding-bottom...Pronto! Eu testei aqui em casa e deu certo (tanto no IE6 quanto no FF2)...

 

Ou será que o problema não é nessa linha? (Eu acredito que seja o espaço que fica entre o texto que você citou e pelo trecho "Postado pela Margô :: 1 Comentário(s)"... Se for esse mesmo, então faça o que disse que resolve)...

 

Espero que tenha ajudado... Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei esse ajuste que tu fizeste Paulo, mas não funcionou. Pelo simples motivo que quem coloca essa "div style" é o próprio Blogger, portanto não tenho como mudar isso. Tentei criar uma nova regra no CSS, definindo o fundo de qualquer elemento <div> como o mesmo fundo da parte específica das postagens, mas isso acabou com as partes em que há margin entre blocos no meu layout.

 

Putz, não sei mais o que faço...

Compartilhar este post


Link para o post
Compartilhar em outros sites

q lixo isso q o Blogger faz hein :(

 

usa o margin negativo pra corrigir nos browsers complacentes e

tenta algo assim pro ie:

 

* html #nomedodiv {   position:relative;   top:-10px;}

 

talvez de certo :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Arrumei em TODOS os browsers mais usados, menos no IE.

Não funcionou nem com o hack que o amigo aí de cima postou. Bah, que saco...

Compartilhar este post


Link para o post
Compartilhar em outros sites

interessante...

#post {width: 500px;float: left;clear: left;margin-top: 10px;_display:inline;}

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pela ajuda pessoal.

Já consegui resolver o problema. Mudei a estrutura do código-fonte (fazer o quê...) e deixei aquela <div> que o Blogger coloca automaticamente "isolada" das outras... Aí ficou mais fácil.

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.