asked on

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?

COBOLdinosaur

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()">  </a></td>

Cd&

labeler2003

ASKER

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).

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

BTW,

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

Cd&

COBOLdinosaur

Glad I could help. Thanks for the A. :^)

Cd&