[Resolvido] Apanhando dos Navegadores com CSS

[D2th3 3]

Amigos,

 

Tenho mais uma questão na qual necessito de informações para agregar ao meu conhecimento e eu diagramar o layout corretamente.

 

Estou fazendo uma listagem de notícias contendo: 3 imagem, 3 título da notícia, 3 resumo da notícias

 

Assim

<ul>
   <li>
   <img src="imagem1.jpg" />
   <h1>Título da Notícia</h1>
   <h2>Resumo com um chamativo para notícia...</h2>
   </li>
   <li>
   <img src="imagem1.jpg" />
   <h1>Título da Notícia</h1>
   <h2>Resumo com um chamativo para notícia...</h2>
   </li>
   <li>
   <img src="imagem1.jpg" />
   <h1>Título da Notícia</h1>
   <h2>Resumo com um chamativo para notícia...</h2>
   </li>
</ul>

Porém a imagem fica em float na esquerda, o título e o resumo fica logo ao lado. Assim eu defini o CSS:

 

#BoxConsultoriaConteudo {
	width: 308px;
}

#BoxConsultoriaConteudo ul {
	list-style-type: none;
}
#BoxConsultoriaConteudo ul li {
	margin-bottom: 20px;
}

#BoxConsultoriaConteudo  img	{
	height: 66px;
	width: 82px;
	float: left;
	margin-right: 9px;
	clear: both;
}
#BoxConsultoriaConteudo h1 {
	font-size: 14px;
	font-weight: bold;
	color: #5B0302;
	margin-bottom: 5px;
}
#BoxConsultoriaConteudo h2 {
	font-size: 12px;
	font-weight: normal;
	color: #910100;
}

 

Só pra varia no FF2, FF3, Chrome e IE8 está funcionando perfeitamente. Porém no IE6 e IE7 está desalinhado, além do margin-bottom nesses últimos estar maior que o designado (20px), conforme imagens abaixo:

 

Imagem tirada do printscreem nos navegadores FF2, FF3, Chrome, IE8

http://siteiaranoivascombr.dheva2.com/correto.htm

 

 

Imagem tirada do printscreem nos navegadores IE6, IE7

http://siteiaranoivascombr.dheva2.com/errado.htm

 

 

O que vocês me sugerem nesse caso?

 

Obrigado a todos

[Thiago Retondar 18]

Adicionou o CSS Reset?

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.tableless.com.br/css-reset

[D2th3 3]

Por padrão já mantenho em todos os CSS o Reset.

Mesmo assim ocorre esse Bug.

 

Mas, de qualquer forma obrigado.

 

Já resolvi.

Inseri uma div e coloquei os elementos h1 e h2 dentro da div, coloquei o float: right e funcionou em todos os navegadores.

 

 

Obrigado.