Wednesday, 5 September 2007

Firefox buttons with text - bug in onClick and mouseover

There is an odd bug in Firefox (1.5 and 2) affecting the BUTTON tag:
  • Where the button has text below an image
  • Where the button is within a table, with "display:inline" applying
  • Where the button is in a cell in the last row of the table
  • Where the button is wrapped in a div with "float:left" or "float:right"
In this case, bringing the cursor up to the button from below will not see the button highlight until perhaps 15px up from the bottom. Change any of the conditions above (or use IE) and there is no problem.

Text to recreate the behaviour:

<html>
<head>
<style type="text/css">
<!--
#table2, .divInline {
display:inline;
}

.floatThis
{
float: left;
}
-->
</style>
</head>
<body>
<p>Problem is show in the button in this table:</p>
<table id="table2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="floatThis">
<button type="button" ><img src="dummy.png" height="26" width="38"><br>TEXT</button>
</div>
</td>
</tr>
</table>
</div>
<p>Without a table, problem is gone</p>
<div class="floatThis divInline">
<button type="button" ><img src="dummy.png" height="26" width="38"><br>TEXT</button>
</div>

</body></html>