I have a table with a hover affect on the rows. It works fine in Internet Explorer, but when testing in Chrome, the right hand corner of the row color gets messed up. It isn't fully hovering. Any suggestions? Here is a link to the code: http://codepen.io/ChaseHardin/pen/DyuEf or code below.
HTML:
<table class="tableStyle hoverTable"> <thead> <tr> <th class="theadCustom"></th> <th class="theadCustom"></th> <th class="theadCustom"></th> </tr> </thead> <tbody> <tr class="even myHover"> <td class="tdCustom">85% $CEZ</td> <td class="tdCustom">Top 1% $F</td> <td class="tdCustom">10% $BMI</td> </tr><!-- Table Row --> <tr class="odd myHover"> <td class="tdCustom">BW: 91 lbs</td> <td class="tdCustom">WW: 781 lbs</td> <td class="tdCustom">YW: 1,420 lbs</td> </tr><!-- Darker Table Row --> </tbody> </table> CSS:
.tableStyle { border: #ccc 2px solid; padding: 15px; text-align: center; font-family: "Gabriola"; font-size: 25px; margin: 0; margin-left: auto; margin-right: auto; } .even { background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); } .odd { background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); } .tdCustom { border: #ccc 2px solid; padding: 15px; } .theadCustom { padding:21px 25px 22px 25px; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background: -moz-linear-gradient(top, #ededed, #ebebeb); } .myHover:hover { background: #f2f2f2; background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); } * { margin: 0; } .hoverTable { width: 80%; border-collapse:collapse; margin: 0; margin-left: auto; margin-right: auto; } 
