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?
LVL 1
labeler2003Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.