CSS Rollover Problem

netscape displays incorrectly

[mortalfrog]

I've created a template for a current project that utilizes CSS rollovers to create a button effect in browsers that support it.

Basically, it utilizes the hover pseudo-class to change the background color of the div, and display: block to fill the table cell.

Oddly enough, the buttons look fine in the left column, but they overlap the edges of the table in the right column when viewed with netscape or mozilla. Internet Explorer renders both columns perfectly.

I'd appreciate it if anyone with CSS experience would take a look - the source code on the page is broken down and commented to make it easy to see the structure.

Here is the link, or if links are not allowed in this forum, you can get to this page through my profile:

[edit - snipped my own links out :D]

[edited by: mortalfrog at 9:12 am (utc) on July 22, 2002]

[Nick_W]

Hi Mortalfrog

Firet: You may wish to dump those urls and post some code before one of the mods comes along and snips them.

Second: It looks just fine to me in Moz and Opera on Linux but a look at the source code told me that it's way over-complex for ehat you're actually trying to do.

If you check the site in my profile and follow the 'client list' there is a good exaple of css rollovers on one of the newer sites. check the source for css location.

Hope that helps, if you have trouble or need mre help, post some code and we'll all have a tinker with it ;)

Nick

[mortalfrog]

thanks for the tips - before I post some code clips, I'm going to try to simplify things, as you suggest.

*pulls out code saw*