Ir para conteúdo

POWERED BY:

Arquivado

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

jarbolino

[Resolvido] Menu CSS Image Rollover - Bug IE6

Por , em Desenvolvimento frontend

Recommended Posts

jarbolino    0

jarbolino
Postado

Estou com um problema no menu que estou trabalhando para um site para intranet.

 

O menu possui efeito hover em que ao passar o mouse sobre cada botão uma nova imagem aparece no background do respectivo botão. Todos os botões são identicos de tamanhao exceto o último, justamente o que está com problema. No link abaixo: INFORMAÇÔES GERAIS

 

http://www.jarbas2008.kit.net/index.html

 

Como ajusto para que o botao INFORMAÇÕES GERAIS faça o mesmo efeito que os demais botões no IE6?? algum hack?

 

 

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}

h1, h2, h3, h4, h5, h6, form {
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a {
	color: #268ED4;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

b {
	color: #268ED4;
	text-decoration: none;
}

b:hover {
	text-decoration: underline;
}

img {
	border: none;
}

/* Header */

#header {
	height: 30px;
	background: #46668D repeat-x;
	margin-top: 0px;
}

#header h1 {
	width: 620px;
	margin: 0 auto;
	padding: 0;
	font-size: 1em;
}

#header h2 {
	width: 620px;
	margin: -30px auto 0 auto;
	text-align: right;
	font-size: 1.4em;
}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Pages */

 /* Commented Backslash Hack
	 esconde para o IE5-Mac \*/
  #pages b {float:none;}
  /* End IE5-Mac hack */
 
/*  IE 5 hack \*/
#pages b {overflow: hidden;}
/* end hack */ 
 
 
#pages {
	height: 145px;
	padding-top: 0px;
	background: url(images/img02.gif) repeat-x;
}

#pages h2 {
	display: none;
}

#pages ul {
	display: block;
	width: 620px;
	height: 145px;
	margin: 0 auto;
	padding: 0;
}

#pages li {
	display: inline;
}

#pages a {
	display: block!important;
	float: left;
	width: 100px;
	height: 72px;
	padding: 0px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	letter-spacing: -1px;
	font-size: 1.1em;
	font-weight: normal;
	color: #000000;
	font-variant: small-caps;
	margin: 0px;
	cursor: help;
	}

#pages b {
	display: block!important;
	float: left;
	width: 200px;
	*width: 200px;
	height: 72px;
	height /**/:72px; /* for IE5/Win only */
	height: 49%; /*For IE*/ 
	padding: 0px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	letter-spacing: -1px;
	font-size: 1.1em;
	font-weight: normal;
	color: #000000;
	font-variant: small-caps;
	cursor: help;
	margin: 0px;
	display: inline;
	}



#pages a:hover {
	color: #000000;	
}

#page1 { background: #E5FAA1 url(images/img07.gif) no-repeat; }
#page2 { background: #97F0E6 url(images/img07.gif) no-repeat; }
#page3 { background: #F3B6CE url(images/img07.gif) no-repeat; }
#page4 { background: #FADDA1 url(images/img07.gif) no-repeat; }
#page5 { background: #C9CDFF url(images/img07.gif) no-repeat; }
#page6 { background: #E5FAA1 url(images/img07.gif) no-repeat; }
#page7 { background: #97F0E6 url(images/img07.gif) no-repeat; }
#page8 { background: #F3B6CE url(images/img07.gif) no-repeat; }
#page9 { background: #FADDA1 url(images/img07.gif) no-repeat; }
#page10 { background: #C9CDFF url(images/img07.gif) no-repeat; }
#page11 { background: #E5FAA1 url(images/info2.gif) no-repeat; }
#page1:hover, #pages .active #page1 { background-image: url(images/med.gif); }
#page2:hover, #pages .active #page2 { background-image: url(images/img12.gif); }
#page3:hover, #pages .active #page3 { background-image: url(images/img12.gif); }
#page4:hover, #pages .active #page4 { background-image: url(images/img12.gif); }
#page5:hover, #pages .active #page5 { background-image: url(images/img12.gif); }
#page6:hover, #pages .active #page6 { background-image: url(images/img12.gif); }
#page7:hover, #pages .active #page7 { background-image: url(images/img12.gif); }
#page8:hover, #pages .active #page8 { background-image: url(images/img12.gif); }
#page9:hover, #pages .active #page9 { background-image: url(images/img12.gif); }
#page10:hover, #pages .active #page10 { background-image: url(images/med.gif); }
#page11:hover, #pages .active #page11 { background-image: url(images/info1.gif); }
/* Content */

#content {
	width: 620px;
	margin: 0 auto;
	padding: 0px;
}

/* Latest Post Box */

#latest-post {
	float: left;
	width: 620px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#latest-post .title {
	letter-spacing: -1px;
	font-size: 2.2em;
}

#latest-post .posted {
	margin-bottom: 0em;
	font-size: .8em;
	font-weight: normal;
}

#latest-post .image {
	float: left;
	margin: .3em 1em 0 0;
}

#latest-post p, #latest-post blockquote, #latest-post ul, #latest-post ol {
	line-height: 155%;
}

/* Recent Posts Box */

#recent-posts {
	float: right;
	width: 320px;
}

#recent-posts h3 {
	width: 310px;
	height: 32px;
	padding: 12px 0 0 10px;
	background: #5A5A5A url(images/img13.gif);
	font-size: 1em;
	color: #FFFFFF;
}

#recent-posts ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#recent-posts li {
	padding: 5px 10px;
	border-bottom: 1px solid #5A5A5A;
}

#recent-posts li:hover {
	background: #EFEFEF;
}

/* Column One */

#colOne {
	padding-bottom: 0px;
}

/* Column Two */

#colTwo {
	padding: 0px;
	background: url(images/img02.gif) repeat-x;
}

#colTwo ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#colTwo li, #colTwo form {
	padding: 10px;
}

#colTwo li {
	display: block;
	float: left;
	width: 220px;
}

#colTwo li ul {
}

#colTwo li li {
	display: list-item;
	float: none;
	padding: 0 0 0 10px;
}

#colTwo h2 {
	margin: 0 0 .5em 0;
	padding: 0 0 0 0px;
	background: url(images/img15.gif) no-repeat left center;
	font-size: 1em;
}

/* Footer */

#footer {
	width: 560px;
	height: 100px;
	margin: 0 auto;
	padding: 20px;
	background: url(images/img02.gif) repeat-x;
}

#footer p {
	text-align: center;
	font-size: x-small;
}

 

Segue o index.html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::Reembolso</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: x-small}
.style5 {font-size: 9em}
-->
</style>
</head>
<body>
<div id="header">
  <h1><img src="images/untitled.jpg" alt="" width="151" height="30" /></h1>
	<h2><a href="http://teste.br">http://teste</a></h2>
	
</div>
<div id="pages">
	<h2>Pages</h2>
	<ul>
		
		<li><a id="page1" href="html/med-1.html">medicamentos</a></li>
	<li><a id="page2" href="#">consultas</a></li>
		<li><a id="page3" href="#">óculos</a></li>
		<li><a id="page4" href="#">vacinas</a></li>
		<li><a id="page5" href="#">exames</a></li>
	<li><a id="page6" href="#">terapias</a></li>
		<li><a id="page7" href="#">academia</a></li>
   	  <li><a id="page8" href="#">fisioterapias</a></li>
   	  <li><a id="page9" href="#">odontologia</a></li>
   	  <li><a id="page10" href="#">órteses/próteses</a></li>
	  <li><b id="page11" href="#">Informações Gerais</b></li>
	</ul>
</div>


<div id="content">
	<div id="colOne">
		<div id="latest-post">
			<h2 class="title"><img src="conteudo/inicial.png" alt="" width="600" height="362" /></h2>
		  <p class="posted"></p>
	  </div>
	  <div style="clear: both; height: 1px;"></div>
  </div>
	<div id="footer"> 
	  <p align="center" class="style2">Superintendência de Gestão de Pessoas - GSP</p>
	  <p align="center" class="style2">Gerência de Administração de Benefícios e Convênios de Saúde - GSPB</p>
  </div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você tá fazendo um :hover numa tag <b> ?? oO pra que? porque?

<li><b id="page11" href="#">Informações Gerais</b></li>
cara... b href não existe...

coloca <a> ai...

Compartilhar este post

Link para o post
Compartilhar em outros sites

jarbolino    0

jarbolino
Postado

existe brother...

se eu colocar como <a> ele fica com o tamanho dos outros botões.

 

Como <b> ele fica do tamanho correto:

 

#pages b {
	display: block!important;
	float: left;
	width: 200px;
	*width: 200px;
	height: 72px;
	height /**/:72px; /* for IE5/Win only */
	height: 49%; /*For IE*/
	padding: 0px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	letter-spacing: -1px;
	font-size: 1.1em;
	font-weight: normal;
	color: #000000;
	font-variant: small-caps;
	cursor: help;
	margin: 0px;
	display: inline;
	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Se o problema é esse, então você tá se enrolando no efeito cascata!

Usa um seletor mais especifico e resolve o problema..

 

<b> é uma TAG para gerar negrito, e ela está em desuso.

A tag para âncoras e links é o a...

 

você fez isso:

id="page11"

Então estilze esse id uê! simples assim...

#page11 {
	display: block!important;
	float: left;
	width: 200px;
	*width: 200px;
	height: 72px;
	height /**/:72px; /* for IE5/Win only */
	height: 49%; /*For IE*/
	padding: 0px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	letter-spacing: -1px;
	font-size: 1.1em;
	font-weight: normal;
	color: #000000;
	font-variant: small-caps;
	cursor: help;
	margin: 0px;
	display: inline;
	}
E passa a usar a tag a href...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado

olha uma dica, não use hacks..

Classes condicionais

 

http://www.toprated.com.br/classes-condicionais-seu-layout-perfeito-em-todos-os-browsers-com-apenas-um-css-e-sem-hacks

 

mais ou menos assim na sua pagina:

 

<!--[if lte IE 9 ]>
<link rel="stylesheet" type="text/css" media="screen" href="css/estilopara_o_ie.css">
<![endif]-->

 

assim qualquer navegador q for na versão do ie9 para baixo vai interpretar a folha de estilos q você mandou ae...

 

coloca isso depois da sua folha de estilo padrão...

 

fica mais correto......

 

mas você q sabe...

 

 

aki fiz o site normal para os navegadores modernos

 

depois abri no ie e foi ageitando os id e class para q funcionassem bem no ie dae coloquei na folha de estilos para o ie e funcionou perfeito sem erros e nada.......

 

ae hacks é meio q uma gambiara

e t bm fica muito chato se for validar o css...

 

muitos aprovam, muitos reprovam... você q ve...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito