My table consists of three cells with widths of 30%, 40%, and 30% respectively. The table itself occupies 25% of its container, which can range from 1024px to 400px.
The first cell contains a button labeled GALLERY. Upon hovering over the cell, the text changes to "<" using jQuery.
The issue arises when the table is compressed (container smaller than 600px) and I hover over the GALLERY button. The width of the cell changes due to the text being replaced by "<", causing the mouseover area to shift and the cell to flicker between hover states.
The cell's width is fixed, there are no padding or margins, and overflow:hidden is applied.
Any suggestions on how to resolve this? The same problem occurs with the third cell as well.
This issue only seems to occur in Firefox.
Screenshots:
- Normal: https://i.sstatic.net/6ZRYy.png
- Hover: https://i.sstatic.net/HHkwA.png
Edit:
jQuery
$('td.back').hover(
function() {
$(this).empty().html('<').addClass("hover");
},
function() {
$(this).empty().html('GALLERY').removeClass("hover");
});
HTML
<table id="toolbar" style="display:none;">
<tr>
<td class="back" onclick="<?php
if ($gallery_id == "2") echo "goToGallery(1);";
else echo "goToIndex();";
?>">GALLERY
</td>
CSS
#toolbar td {
font-family:'helvetica',sans-serif;
font-size:11px;
color:white;
text-align:center;
cursor:pointer;
overflow:hidden;
-webkit-font-smoothing:antialiased;
}
#toolbar td.back {
width:30%;
}
#toolbar td.back:hover {
color:#e61b23;
}