<li> com imagens e espaçamento.

[Andre Cocuroci 0]

Olá,

 

A algum tempo venho mexendo com o css mas nunca de uma forma tão complexa.

Já fiz vários 'experimentos' utilizando só css mas na hora de fazer algo 'de verdade' acabava apelando para as tabelas.

 

Porém resolvi fazer um site só com css e no decorrer do trabalho algumas dúvidas acabaram surgindo.

Algumas coisas eu consegui resolver sozinho já outras tive que apelar pro meu amigo google e já esta que vou relatar abaixo eu já achei uma solução mas não estou satisfeito com ela.

 

Bom, vamos lá:

 

Resolvi fazer um submenu, daquele que aparecem quando você passa o mouse, com as propriedades de lista. As opções de lista, por eu usar uma fonte não padrão, acabei fazendo todas em imagens e quando fui colocar isso no css aparecia um 'maldito' espaçamento vertical entre as imagens.

 

O código original era assim:

 

#submenu_geral {	position: absolute;	width: 120px;	border-left: 0px;	border-top: 1px solid #BEBEBE;	border-right: 1px solid #BEBEBE;	border-bottom: 1px solid #BEBEBE;	padding: 0px;	margin: 0px;	top: 0px;	left:0px;	z-index: 6;	}	#submenu_geral ul{	padding: 0px;	margin: 0px;	list-style: none;			}

O problema apareceu no firefox e no IE. Um espaçamento estranho entre uma imagem e outra.

 

Fuçando nas propriedades acabei fazendo isso:

 

#submenu_geral img{	display: block;}

E o problema do espaçamento no FF foi solucionado porem no IE ainda aparecia os espaçamentos e então resolvi colocar tb na propriedade acima esta linha: float: left.

 

No IE o problema foi resolvido mas no FF o menu ficou todo bagunçado. Pesquisando na Internet achei uma solução no minimo bizarra e o codigo final ficou deste jeito e funcionando no IE, FF e Opera:

 

#submenu_geral {	position: absolute;	width: 120px;	border-left: 0px;	border-top: 1px solid #BEBEBE;	border-right: 1px solid #BEBEBE;	border-bottom: 1px solid #BEBEBE;	padding: 0px;	margin: 0px;	top: 0px;	left:0px;	z-index: 6;}	#submenu_geral img{	display: block;	_float:left;}		#submenu_geral ul{	padding: 0px;	margin: 0px;	list-style: none;		}

Com isso acabou ficando igual nos três navegadores que estou usando mas acabou não validando meu css por causa do '_' na frente do float.

 

Vocês sabem como posso resolver este problema 'fresco'?

Se tem algo errado no me código ou então outra maneira pra contornar isso?

 

Obrigado;

[TheChessMan 0]

Existem outras formas de hacks para o IE, um deles e que se aplica ao seu caso, é o *html

 

#submenu_geral img{

display:block

}

*html #submenu_geral img{

float:left;

}

 

Lembrando que este hack não funciona do IE7 e aconselha-se usar comentários condicionais para maior segurança de que vai funcionar tudo direitinho no IE 7 tbm

[pa_bruno 0]

retira o float e coloca um height: 1%... deve funcionar... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TheChessMan 0]

Ah é... pode ser tbm =)

[Andre Cocuroci 0]

Fiz o que o TheChessMan falou sobre o hack e deu certo e tambem já dei uma lida no CC's.E sobre o que pa_bruno falou do pa_bruno height: 1% coloquei na propriedade #submenu_geral img {..} e tirei o float mas no IE os espaços voltaram. :(

[pa_bruno 0]

tem link?

[Andre Cocuroci 0]

tem link?

http://www.aircruiser.com.br/site/principal/index.phpAqui esta o link, tirei o float e deixei somente o height: 1%.No IE tá com os espaços e no FF e Opera estão normais.