I have this problem with my rollover images in CSS with the Firefox 3 browser. I made one image in photoshop and I have it shifting positions in CSS when I rollover it. The problem is, the box is overlapping the rest of the links making them unclickable. This problem only exists in Firefox 3, it works fine in Firefox 2, IE, and Safari.
As you can see, the last link in each row works, but the rest before it do not. Do you guys know what the problem is, and how I can fix it? Thank you so much for your help.
Take out the display: block; and set that to display: inline; as they are inline and not blocked. Once you do that, add float: left; to your a elements and that should fix the problem. If not, it will set you on a path to get it working!
I have this problem with my rollover images in CSS with the Firefox 3 browser. I made one image in photoshop and I have it shifting positions in CSS when I rollover it. The problem is, the box is overlapping the rest of the links making them unclickable. This problem only exists in Firefox 3, it works fine in Firefox 2, IE, and Safari.
Here is the link to the page:
http://students.philau.edu/derkunt2/projects.html
Here is the link to the CSS:
http://students.philau.edu/derkunt2/port.css
Here is the problem as seen through Firebug:
http://img208.imageshack.us/my.php?image=cssby9.jpg
As you can see, the last link in each row works, but the rest before it do not. Do you guys know what the problem is, and how I can fix it? Thank you so much for your help.
Take out the display: block; and set that to display: inline; as they are inline and not blocked. Once you do that, add float: left; to your a elements and that should fix the problem. If not, it will set you on a path to get it working!
Hope this helps!
Best Regards,
Jake