Forum Moderators: open
I do have a strange problem in Firefox. I use a javascript in combination with html to make an interactive navigation bar.
Under internet explorer 6.x it works just fine, in firefox the script doesn't work.
I designed my navigation bar by making a one column multiple row table. Then putting text in the cells in the table which were links of course. Then when someone moves there mouse over a link the cell in the table the links in changes its background colour.
The first problem is, the link doesn't work in Firefox. I put the link outside " <td> " so if I click somewhere not the text but inside cell, the click would work. I have resolved it by using " onClick='' ", but anybody have ideas why it doesn't work in my Firefox?
The second problem is, mouse cursor didn't change when I move cursor to the cell.
Here's the codes.
<script language="javascript">
function fover(obj){
obj.style.backgroundColor = 'blue';
obj.style.cursor = 'hand';
}
function fout(obj){
obj.style.backgroundColor = '';
}
</script>
something here
<tr>
<a href="link.htm"><td valign="center" align="left" height="25" bgcolor="#808080" onMouseOver="fover(this)" onMouseOut="fout(this)"><font color="white">aaaa</font></td></a>
</tr>
Please help me.
I have searched the forum and didn't find any relevant topic.
Thank you.
<td> is a block level element
<a> is an inline element
Block elements can contain inline elements, but not vice versa. That's why it doesn't work in Firefox. Also, the correct cursor style is "pointer".
As always, it's best to always validate your markup [validator.w3.org] and CSS [jigsaw.w3.org].
I had tried to place <a> inside <td> tag,
but it makes the area in the cell but not the text is not clickable. So I want to make all the cell is clickable.
Any ideas?
Anyway, thanks for suggestions. I'd tried "pointer" and it did work.
<td><a href="page.html" style="display:block">click here</a></td>
Kaled.
