Float and hover background in IE and FireFox

[BitBanger]

This is my first post on this forum, so I hope I am following the proper etiquette. I am in the middle of a project for a local community group and want to float a banner and navigation area into the top left corner of the page. I can get the page to look and work fine in both Internet Explorer 6.0 and FireFox 1.5, but not with the same CSS coding.

Here is a link to a set of sample pages I set up to show what I am talking about.

http://www.pineyridge.info/forum

The version that looks and works fine in FireFox looks fine in Explorer, but the hover pseudo-class does not function in Explorer.

The version that looks and works fine in Explorer total falls apart in FireFox. Extra space appears around the navigation button areas, and the actual background images for the buttons doesn’t even appear in the top left of those areas. But, even though the backgrounds do not appear in the proper locations, they do react to the hover pseudo-class.

I’m looking for some suggestions on how to create a CSS style that will work properly in both browsers.

I will keep my sample page up and publish the answer and all the technical specs when I get it working.

Thanks in advance to everyone who helps out on this project.

PS: The CSS coding for the demo site is hard coded, not in a CSS file. I did this to make it easier for someone to view the source without loading additional files.

PPS: I just updated the demo page so that the solution shows how the graphics will eventually float over a watermark background. I will updae everythign with a full description when I learn how to make teh navigation buttons work in both browsers.

Thanks again to anyone who can make a suggestion on how this will work.