[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

CSS Menu Roll-Over Images Work In IE But Not In Mozilla

I'm trying to help my daughter set up the Forestry Club Web site for Oregon State University.  She wants to have a menu with images that change when you roll over them, and at the same time a menu drops down.  The web site is at:  http://www.cof.orst.edu/cof/clubs/forestry/club.html

I've used javascript for the drop-down menus and they work fine.

I'm trying to use CSS to make the roll-over images change.  It works fine in IE, but it does not work in Mozilla or (she says) on a Mac.  The table cells collapse to zero width.  This is the html for the menus:

 <table width=500 cellpadding=0 cellspacing=0 border=0>
              <tr>
                <td style="width:64"><a class="menuclub" href=javascript:; onMouseOver=s_show('search',event) onMouseOut=s_hide()> </a></td>
                <td style="width:118"><a class="menufirewood" href=javascript:; onMouseOver=s_show('e_mail',event) onMouseOut=s_hide()> </a></td>
                <td style="width:172"> <a class="menulogging" href=javascript:; onMouseOver=s_show('masters',event) onMouseOut=s_hide()> </a></td>
                <td style="width:91"> <a class="menuextras" href=javascript:; onMouseOver=s_show('sports',event) onMouseOut=s_hide()> </a></td>
                <td style="width:73"> <a class="menulinks" href=javascript:; onMouseOver=s_show('sub_demo',event) onMouseOut=s_hide()> </a></td>
                <td style="width:73"><a class="menuhome" href="index.html"> </a></td>
              </tr>
            </table>

The CSS for the menu roll-overs is (I've only shown the first two images to save space here, the others all work the same with different images):

a.menuclub            {width:64;
                  height:24;
                  background: url(images/navigation/1club01.jpg)
            }
a.menuclub:hover            {width:64;
                  height:24;
                  background: url(images/navigation/1club02.jpg)
            }
a.menufirewood            {width:118;
                  height:24;
                  background: url(images/navigation/2firewood01.jpg)
            }
a.menufirewood:hover      {width:118;
                  height:24;
                  background: url(images/navigation/2firewood02.jpg)
            }

Can this be made to work in Mozilla?
0
labeler2003
Asked:
labeler2003
  • 4
1 Solution
 
COBOLdinosaurCommented:
The cells collapse because there is nothing in them. Try putting a non-breaking space in the links this way; and bring the code into compliance with the standards by quoting attribute values:
<td style="width:64"><a class="menuclub" href="javascript:;" onMouseOver="s_show('search',event)" onMouseOut="s_hide()">&nbsp; </a></td>


Cd&
0
 
labeler2003Author Commented:
I've added the quotes you suggested.  It had no effect.

I  tried adding a non-breaking space and it doesn't seem to work.  It adds an underscore to the left of each image in IE, and produces a narrow vertical line in Mozilla.  If I add more non-breaking spaces then the image starts to show in Mozilla--but there is an underscore to the left of each image and under the left 1/3 of each image.  The effect on IE of adding more non-breaking spaces is that additional copies of the image appear, piling one on top of the other vertically (I assume they are wrapping within the table cell).
0
 
COBOLdinosaurCommented:
Okay I got it.  

Add this to the stylesheet:
a {display:block;}

Mozilla is following the standard and enforcing the inline behaviour that it is supposed to use for an a tag.  You hve to make it a block element to get the background for the whole width.

Cd&
 
0
 
COBOLdinosaurCommented:
BTW,

I don't have a MAC to set it up on so I don't if it solves that problem as well.

Cd&
0
 
COBOLdinosaurCommented:
Glad I could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now