Grow your CSS skills. Land your dream job.

Firefox 3 and CSS Rollover problems

  • # October 3, 2008 at 8:23 pm

    Hi everyone,

    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.

    # October 5, 2008 at 2:21 pm

    run your code through the validator. This often finds errors that you have missed. fixing them will sometimes fix your problem.

    # October 7, 2008 at 5:19 am

    Hello,

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".