Problemas no menu com rollover imagem.

[.:: Pegasus ::. 0]

Olá pessoal tudo bem?

Faz mais ou menos uma semana que eu não posto aqui neh... Pois é, o motivo é um site que estou desenvolvendo diretamente com o cliente. Todos os dias eu falo com ele no msn e as veses por telefone, é um cliente exigente e estou fazendo de acordo com que ele me pede.

Para ter mais liberdade de desenvolvimento decidi fazer o layout no Fireworks, o cliente me pediu um menu igual aquele antigo website do Windows Vista, Eu consegui copiar mais ou menos igual, e fiz algumas modificações que ele me pediu, como uma área de login, um topo com o logo dele e etc.. Pois bem.. após deixar o site do jeito que ele queria resolvi exportar as imagens , partes por partes e começar a programar pelo Dreamweaver. E ai que começaram os problemas.

Para poder explicar melhor os meus problemas eu resolvi coloca-lo em um host.

http://paginas.terra.com.br/relacionamento...phycorporation/

Observando o menu e o código fonte vocês perceberam que o topo, sistemas, downloads, imagens e contato foram feitos utilizando listas não ordenadas, já o Login e Parceiros foram feitos utilizando Divs, pois terá mais conteúdo dentro deles.

Eu não sei se esse foi o procedimento correto, mas foi a unica maneira que eu consegui. e ainda tive que usar hacks.

Já o conteudo eu terei que usar muito mais, pois no FF ele está no centro certinho, no IE ele fica alinhado a esquerda colado com o menu e no Ie7 ele fica na direita..

Eu queria umas dicas ou alguma luz se pelo menos estou no caminho certo..

Eu poderia muito bem exportar pelo Fw e deixar no Dw com tabelas que o cliente nem perceberia, mas eu não quero mais isso nem morto. mesmo que eu tenho que enxer de hacks todo o código fonte.

Vou mostrar o código CSS, e vocês vejam como está ficando, lembrando que tudo isso foi idéia do meu cliente. eu só apenas passo para o papel.

body {	background:#FFF url(imagens/background.jpg) no-repeat;	margin:0;	padding:0;}#menu {	float:left;	width:195px;	margin:0;	padding:0;	width:195px;}#menu ul {	margin:6px 0 0 27px;	list-style:none;	width:195px;}#topo {	background:url(imagens/bt_topo.jpg) no-repeat;	width:195px;	color:#FFFFFF;	text-decoration:none;	height:141px;	display:block;}#sistemas {	background:url(imagens/bt_sistemas.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:53px;	display:block;}#downloads {	background:url(imagens/bt_downloads.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:53px;	display:block;}#imagens {	background:url(imagens/bt_imagens.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:53px;	display:block;}#contato {	background:url(imagens/bt_contato.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:53px;	display:block;}#login {	margin:0 0 0 67px;	_margin:0 0 0 27px;	background:url(imagens/bg_login.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:139px;	display:block;}#parceiros {	margin:0 0 0 67px;	_margin:0 0 0 27px;	background:url(imagens/bg_parceiros.jpg) no-repeat;	width:175px;	font-family:"Trebuchet MS";	font-size:17px;	padding:5px 0 0 20px;	color:#FFFFFF;	text-decoration:none;	height:115px;	display:block;}#topo:hover {	background:url(imagens/bt_hovertopo.jpg) no-repeat;}#sistemas:hover {	background:url(imagens/bt_hoversistemas.jpg) no-repeat;}#downloads:hover {	background:url(imagens/bt_hoverdownloads.jpg) no-repeat;}#imagens:hover {	background:url(imagens/bt_hoverimagens.jpg) no-repeat;}#contato:hover {	background:url(imagens/bt_hovercontato.jpg) no-repeat;}#conteudo {	float:right;	width:500px;	margin:200px 205px 0 0px;	_margin:200px 175px 0 0px;}#rodape {	clear:both;}

Ps: Eu decidi deixar o código assim para poder mexer individualmente em casa coisa, foi uma opção não abreviar por enquanto.

Obrigado.

[.:: Pegasus ::. 0]

Olá pessoal, boa noite..

Estive tentando resolver esse problema desde quando postei.. e vi que somente com os hacks mesmo, pelo menos na minha situação sim..

Pelo menos o menu eu consegui resolver, e de uma maneira um tanto quanto estranha, quero compartilhar com vocês para ver se alguém já teve esse problema e até mesmo para caso alguém se deparar com algum problema desse tipo já ter alguma noção.

Seguinte:

No link abaixo está o código CSS do problema específico e logo abaixo a imagem do menu que eu fiz visto no Internet Explorer 7 sem o seu devido hack.

#login {	margin:0 0 0 67px;	_margin:0 0 0 27px;

Ps: O problema no Parceiros é o mesmo que o login, logo postei somente o do login.

http://www.mprcaldeirarias.xpg.com.br/semhack

Nesse exemplo sem o hack o menu fica mais a direita do que o menu (lista) adotando o hack do Ie6 ( pois o Hack do _[underline] também funciona no Ie7) o que é estranho porque no Ie6 ele fica perfeito com esse hack, pela lógica no Ie7 também deveria ficar.

Abaixo o código CSS do problema específico com o seu devido Hack e logo abaixo a imagem de como ele se comportou.

#login {	margin:0 0 0 67px;	*margin:0 0 0 0;	_margin:0 0 0 27px;

defini 0 para o margin esquerdo porque pela imagem de cima seria mais ou menos aonde ele deveria ficar. porém olhem o que aconteceu.

http://www.mprcaldeirarias.xpg.com.br/comhack

O menu ficou colado à esquerda, se for parar pra pensar ele fez o certo, mas pela distância entre onde ele estava e o começo da página não dá menos que 60px, logo, com 27px citados àcima deveria ficar certo. mas beleza.

Abaixo o código CSS com o seu hack mas com as mesmas propriedades definidas no hack do Ie6 e logo abaixo a imagem.

#login {	margin:0 0 0 67px;	*margin:0 0 0 27px;	_margin:0 0 0 27px;

pela lógica agora ele deveria ficar na mesma posição que na primeira imagem, pois está definida as mesma propriedades que o Hack do iE6.. mas..

http://www.mprcaldeirarias.xpg.com.br/comhackbug

O estranho é que agora ficou perfeito! Alguém consegue me dizer o que possa ter acontecido?

Bom.. vendo as imagens vocês perceberam que o conteudo está desalinhado neh.. e também somente no ie7, pois com o mesmo hack e usando a mesma lógica que os dessas divs, porém dessa vez eu fiz a mesma coisa e não funcionou..

Abaixo o Código CSS do conteudo, se alguém puder me ajudar com esse problema eu agradeço.

#conteudo {	float:right;	width:500px;	margin:200px 205px 0 0;	*margin:200px 100px 0 0;	_margin:200px 100px 0 0;}

Bom.. espero que esse meu problema sirva para algum estudo ou aprendizado.

Se não entenderam alguma coisa, seja da minha dúvida ou de minha explicação estou aqui para tentar explicar melhor.

Abraços.