Get a free trial // 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:

    Here is the link to the CSS:

    Here is the problem as seen through Firebug:

    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


    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,

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed