CSS simples não está funcionando

Célio-Ctba · 20 de janeiro de 2005

Fala galera!!!

Estou tentando fazer um menu usando css, é muito simples mas não funciona se alguém puder dar uma força!!!

***código htm***


<html>
<head>

<title>Untitled Document</title>
<link href="estilo2.css" rel="stylesheet" type="text/css">

</head>

<body>
<table width="150" border="0" cellpadding="1" cellspacing="1" class="menu1">
  <tr>
    <th class="menu1" scope="row">Radio</th>
  </tr>
  <tr>
    <th class="menu1" scope="row">TV</th> 
  </tr>
  <tr>
    <th class="menu1" scope="row">Jornal</th>
  </tr>
  <tr>
    <th class="menu1" scope="row">Helicoptero</th>
  </tr>
  <tr>
    <th class="menu1" scope="row">Peixes</th>
  </tr>
</table>
</body>
</html>

***código css***


.menu1:hover {
	background-color: #00FF00;
}

Abraços

FallenHawk · 20 de janeiro de 2005

O Internet Explorer não sabe que o :hover se aplica para elementos diferentes de links, portanto se a classe está aplicada para uma tabela ele não verificará a presença do ":hover".

Quando você quer fazer menus desse tipo a solução mais correta é utilizar elementos de bloco (display: block;) em listas com links.

Dê uma olhada nesse site:

http://www.accessify.com/tools-and-wizards...ist-o-matic.asp

Você vai respondendo as perguntas e ele fará um menu com CSS em listas pra você, aí você vai entender melhor como fazer um menu sem usar tabelas.

Célio-Ctba · 21 de janeiro de 2005

O link é muito bom, com vários modelos de menus.

Agora no meu não funcionou 100%, acho q falta uma relação entre o arquivo css e o htm.

Estou colocando isso: <link href="estilo2.css" rel="stylesheet" type="text/css"> no arquivo htm, só isso basta para funcionar?

FallenHawk · 21 de janeiro de 2005

Não entendi sua pergunta... a tag <link> que você passou está ok desde que o HTML e o CSS estejam na mesma pasta.

No seu menu (que você passou no primeiro post) o problema me parece outro. Assim:

<th class="menu1" scope="row">Radio</th>

A classe "menu1" está aplicada no TH.

Depois você passa a instrução:

.menu1:hover {
background-color: #00FF00;

}

Isso não vai funcionar porque o :hover nesse caso está em relação ao TH e o Internet Explorer não reconhece :hover em qualquer elemento diferente do A (links).

Depois, "Radio" (nesse caso) não possui nenhum link. Se você usar:

<th>[url="#"]Radio[/url]</th>

Aí você terá um efeito onde apenas o texto possui um fundo diferente, ao invés da célula toda porque, como eu disse, o A nesse caso não é um elemento de bloco. Nas listas no link que te passei os A são elementos de bloco, por isso que você consegue aquele efeito.

No caso usando o HTML que te passei acima (da classe no A), o CSS deveria ser algo como:

.menu1 {
display: block;
width: auto !important;
width: 100%; /* corrige o bug do IE com links de bloco */
}

.menu1:hover {
background-color: #00FF00;
}

Tente esse código...

PS: O bug que eu comentei é um bug onde se o link de bloco não tiver uma dimensão (comprimento ou altura) o IE não vai reconhecer ele como elemento de bloco completamente.