ik heb een stukje css in FF dat werkt perfect maar in IE bakt hij er nix van! hoe kan dat??

mijn css is:

<style>
td.menu{
	text-align:center;
	background-color: #666666;	
	font-family: arial;
	font-size: 13px;
	width: 15%;	
}
td.menu:hover{
	background-color: #333333;
}
td.menu a {
    float: left;
    width: 100%;
    height: 100%;
}
</style>
Heb je een voorbeeld?

Verder moet background-color gewoon background zijn....

Width in procenten aangeven is ook niet erg tactisch....:(
1. background-color werkt gewoon...
2. In % maakt niks uit
3. Wat is er mis mee?^^

Volgens mij werken deze 2 codes niet in IE:

[b]td.menu:hover{[/b]
    background-color: #333333;
}
[b]td.menu a {[/b]
    float: left;
    width: 100%;
    height: 100%;
}


Probeer ook eens je CSS te verifieren op W3C.org:

http://jigsaw.w3.org/css-validator/validator?text=td.menu%7B%0D%0A++++text-align%3Acenter%3B%0D%0A++++background-color%3A+%23666666%3B++++%0D%0A++++font-family%3A+arial%3B%0D%0A++++font-size%3A+13px%3B%0D%0A++++width%3A+15%25%3B++++%0D%0A%7D%0D%0Atd.menu%3Ahover%7B%0D%0A++++background-color%3A+%23333333%3B%0D%0A%7D%0D%0Atd.menu+a+%7B%0D%0A++++float%3A+left%3B%0D%0A++++width%3A+100%25%3B%0D%0A++++height%3A+100%25%3B%0D%0A%7D&warning=2&profile=none&usermedium=all

[edit]The CSS checker geeft geen errors bij deze CSS, alleen waarschuwingen...[/edit]
mijn code is nu:
 
<style>
td.menu{
	text-align:center;
	background: #666666;	
	font-family: arial;
	font-size: 13px;
	width: 150px;	
}
td.menu:hover{
	background-color: #333333;
}
td.menu a {
    float: left;
    width: 100%;
    height: 100%;
}

maar hij doet het nog steeds niet in IE??

en mijn voor beeld is:
http://da3.awardspace.com/menu.html
<style type="text/css">
td.menu {
    text-align: center;
    background-color: #666666;    
    font-family: arial;
    font-size: 13px;
    width: 15%;    
}
td.menu:hover{
    background-color: #333333;
}
td.menu a {
    float: left;
    width: 100%;
    height: 100%;
}
</style>


Dat moet gewoon werken, behalve de hover...

Bij het menu'tje de td's:
onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"

Met een beetje javascript redt IE zich wel:)

[edit]De tabel van je menu:

<table align="center">
  <tr>
    <td class="menu" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"><a href='index.php' class="menu"> Begin </a></td>
    <td class="menu" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"><a href='memberlist.php' class="menu"> Gebruikerslijst </a></td>
    <td class="menu" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"><a href='profiel_bewerk.php' class="menu"> Profiel </a></td>
	<td class="menu" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"><a href='useroptions.php' class="menu"> Beveiliging </a></td>
	<td class="menu" onmouseover="this.style.background='#333333';" onmouseout="this.style.background='#666666';"><a href='logout.php' class="menu"> Uitloggen </a></td>
  </tr>

</table>
[/edit]
dankje wel man echt klasse :) ;)
Dit is beter
html

<table>
  <tr>
    <td class="menu">
      <a href="#">Hallo</a>
   </td>
  </tr>
</table>

[b]css[b]

.menu {
text-align: center;
font-family: arial;
font-size: 13px;
}
.menu a {
display: block;
height: 100%;
width: 100%;
background: black;
color: white;
}
.menu a:hover {
background: gray;
color: red;
}


Ik dacht dat dit goed moet werken...
IE ondersteud geen :hover bij td's of andere tags, alleen bij a dacht ik ;)

En om javascript te gebruiken bij een menu als deze lijkt mij totaal onzin...
wat maakt het uit?? het werkt tog!

Reageren