Hi all,

I've got the following problem with some buttons i want to use roll-over effects with. I've defined a button div to show up three times in a button bar at the top of my site, each div holding a link to a page opening up in a frame on the page.

Now, in IE6, the background images used in de CSS a-tag code show up, but they don't in Chrome or FireFox. Any ideas on what i'm doing wrong?

Site's URL:


www.icoe.be/NTROPHY/ntrophy2.html

thx
B

CSS Code:

div.button
	{
		width:200px;
		height:31px;
		border: 0px solid red;
		background: transparent;
	}
	a.upload{ background: url('http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Upload Page1.0.gif') no-repeat center;	}
	a.upload:hover{	background:url("http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Upload Page1.1.gif") no-repeat center;	}

	a.ranking{	background:url("http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Ranking1.0.gif") no-repeat center;	}
	a.ranking:hover{	background:url("http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Ranking1.1.gif") no-repeat center;	}

	a.forum{	background:url("http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Forum1.0.gif") no-repeat center;	}
	a.forum:hover{	background:url("http://www.icoe.be//NTROPHY/NTbuttons/N Trophy Forum1.1.gif") no-repeat center;	}

html-code

<table width="100%"><tr><th><a class="upload" height="31px" href="http://www.badger1815.be/uploadLOVdev.php" target="frame1"><div class="button"></div></a><th><a class="ranking" href="http://www.badger1815.be/PlayerNRankingFull.php" target="frame1"><div class="button"></div></a><th><a class="forum" href="http://z10.invisionfree.com/Napoleonics_Trophy/index.php" target="frame1" ><div class="button"></div></a></tr></table>

div elements CANNOT be enclosed in <a>nchor element