Links work in IE, but not in Firefox or Mozilla 1

[Savington]

I've been tasked with figuring out what is wrong with our website. The links on the left side of the page do not seem to work with numerous browsers such as Firefox and Mozilla, but they work fine with Microsoft IE. The links are in a table, and the cell of the table is designed to change colors upon mouse-over. A sample table is included below. Can anyone explain to me WHY this would not work with the other browsers, and more importantly, how do I fix the problem? Any help would be GREATLY appreciated.

<TABLE WIDTH=100% BGCOLOR=orange BORDER=1 BORDERCOLOR=dimgray>
<TH COLSPAN=1 ALIGN=center BGCOLOR=white> <FONT SIZE=+2 COLOR=black> LINKS </FONT> </TH>
<TR> <TD BGCOLOR=red ALIGN=center WIDTH=100% onMouseOver="style.backgroundColor='red'; window.status='WPHOA main page'; return true;" onMouseOut="style.backgroundColor='red'; window.status = ''; return true;"><FONT COLOR=white> HOME </TD> </TR>
<TR> <A HREF=rules.html><TD BGCOLOR=orange ALIGN=center WIDTH=100% onMouseOver="style.backgroundColor='dimgray'; window.status='Download applicable rulebooks'; return true;" onMouseOut="style.backgroundColor='orange'; window.status = ''; return true;"><FONT COLOR=blue> The Rules </TD></A> </TR>
<TR> <A HREF=become_ref.html><TD ALIGN=center WIDTH=100% onMouseOver="style.backgroundColor='dimgray'; window.status='Learn what you need to do to become an official'; return true;" onMouseOut="style.backgroundColor='orange'; window.status = ''; return true;"><FONT COLOR=blue> Become an Official </TD></A> </TR>
<TR> <TD ALIGN=center>
<TABLE WIDTH=100% BGCOLOR=white BORDER=0 onMouseOver="style.backgroundColor='dimgray'; window.status='You must sign in to visit the Members area!'; return true;" onMouseOut="style.backgroundColor='white'; window.status = ''; return true;">
<A HREF=members/index.html>
<TR> <TD ALIGN=left> <IMG ALIGN=left SRC="images/misc/whistle.gif" width="32" height="26">
<TD ALIGN=center> </TD>
<TD ALIGN=right> <IMG ALIGN=right SRC="images/misc/whistle.gif" width="32" height="26"></TD>
</TR>
<TH COLSPAN=3><FONT SIZE=+2 COLOR=red>Members<BR><FONT COLOR=blue><U>SIGN IN</U></TH>
</A>
</TABLE>
</TD> </TR>
</TABLE>

Please help!

 

[Vragabond]

IE is forgiving, other browsers are not. When creating a table, you have to know that a <table> tag can only be followed by a handfull of elements that are all strictly table related. It is similar with the table row (<tr>) element: only table cell (<td>) or table header (<th>) can follow that. In your code, anchor (<a>) elements are stuck in there, probably in a misguided attempt to create a link over the whole cell or row. This cannot be done like that. If you want to use cell as a link, you need to put the link inside the cell. That will work in all browsers, but might cause a little different behaviour in your preferred browser -- only the text inside the cell will now be clickable, not the entire cell (if it was before). However, you can achieve that same effect by styling that link via css.

 

[Savington]

Thanks so much for the tip. You are correct in that I was trying to allow the user to click anywhere on the table entry with the anchor outside the <TD> entry. I now understand how to fix the problem to make it work in any browser. However, I still would like to make it work by not having to click specifically on the text. You said this is possible "by styling that link via css." Can you PLEASE elaborate on how to do that? Thanks so much!

 

[Vragabond]

Something like this might work out of the box. For more styling you would have to know what you want:

<style type="text/css>
 table a {
   display: block;
   width: 100%;
   height: 100%;
   background: #fff;
 }

 table a:hover {
   background: #ccc;
 }
</style>

Put this in the head and all links within a table will fill up the entire cell and will change background color on hover.