Skip navigation
jgdutt
Currently Being Moderated

Why is my image rollover not working in Firefox?

May 31, 2012 6:38 PM

I am starting a new site.  In the middle of the page on the right, I have a simple image rollover effect for the UPCOMING EVENTS button.  It is also supposed to link to another page (not designed yet).  It works in Explorer, not in Firefox.  How can I fix this?  I suppose I can revert to javascript but it adds a lot of coding to the page.  I don't know what to do.    http://jeannettedutton.com/MLVC/

 
Replies
  • Currently Being Moderated
    May 31, 2012 6:53 PM   in reply to jgdutt

    Validate your code.

     

    http://validator.w3.org/check?uri=http%3A%2F%2Fjeannettedutton.com%2FM LVC%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

     

    There is a mis-placed <div> tag on Line 94 - should be on Line 88 (after height="333" /> )

     
    |
    Mark as:
  • Currently Being Moderated
    May 31, 2012 7:32 PM   in reply to jgdutt

    I am suspticious of this link

    <a href="./events.html">

    Is that supposed to be preceded by ../ to go up one level?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2012 5:40 PM   in reply to jgdutt

    I think all I did was to put a space in front of the word border.

    but in case I also changed something else, this code will work in your page.

     

    <a href="./events.html">

     

    <img src="images/upcomingEvents1.png" onmouseover= "this.src='images/upcomingEvents2.png'" onmouseout="this.src='images/upcomingEvents1.png'" border="none" /></a></div></div>

     

      <div id="content"><br />

     

    HTH

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 5:00 AM   in reply to jgdutt

    Here's the problem -

     

    #rotating-item-wrapper {

        position: relative;

        width: 950px;

        height: 350px;

        background-color:transparent;

        z-index: -100;

    }


    Why have you assigned a negative z-index to this container?  As far as FF is concerned, that negative z-index places the element BENEATH the page, hence your mouseovers are all blocked by the page itself (the same happens in Safari, by the way).  As a result, it's very dangerous to ever use negative z-indices for any purpose.

     

    Try changing that z-index to 1 and see what happens.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 12:46 PM   in reply to jgdutt

    Set the navigation bar at a higer z-index - say 999?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 2:50 PM   in reply to jgdutt

    In Menu.css, change this -

     

    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */

        top: 100%/* 100% is at the bottom of parent menuItemContainer */

        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,

                        and your personal taste.

                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0

                        on MenuItemContainer and MenuItem on the parent

                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align

                        the dropdown with the left of the menu item label.*/

        z-index:0;

        overflow:visible;

    }

     

    to this -

     

    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */

        top: 100%/* 100% is at the bottom of parent menuItemContainer */

        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,

                        and your personal taste.

                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0

                        on MenuItemContainer and MenuItem on the parent

                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align

                        the dropdown with the left of the menu item label.*/

        z-index:999;

        overflow:visible;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 3:02 PM   in reply to jgdutt

    Good luck.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points