I am learning CSS and I have run into yet another problem. I W3C validated my page and validated the CSS but I have now managed to cause another issue by doing this.
I have a lot of hover areas, they seem to all have been shifted down slightly. If I try setting on of them to Top: 0px I can see a ~15px padding between it and the top edge of the picture. I have tried setting margin: 0px, padding: 0px, border: 0px everywhere I can think of.
The page works fine in my IE7, but it wont work in FF3.
You can see it for yourself here, http://www.giles-and-elsas-wedding.com/test.pl
The aerial is the most obvious part, the a:hover zone should go up to the very top of the aerial but it starts 14 pixels below.