My goal is to make the background change when a user hovers over the td element. The current behavior of my code can be seen in the image below:
I am working to eliminate the white space so that the gradient fills the entire td/cell.
The following code snippet represents one row of my table.
<tr>
<td class="itemTrue">
<h4>AMA<br>ROUND ALUMINUM MAST ARM SERIES</h4>
</td>
<td class="itemTrue">
<h4>AVPL-SSA<br>4 INCH SQUARE STRAIGHT ALUMINUM SERIES</h4>
</td>
<td class="itemTrue">
<h4>SMA<br>ROUND ALUMINUM MAST ARM SERIES</h4>
</td>
<td class="itemTrue">
<h4>AVPL-SSS<br>4 INCH SQUARE STRAIGHT STEEL SERIES</h4>
</td>
</tr>
Below is the CSS code affecting these tags.
table {
position: relative;
top: 50px;
box-shadow: 1px 1px 8px 7px #234229;
width: 1300px;
cell-spacing: 0px;
padding: 0px;
}
table, td, tr {
border: 1px solid black;
font-family: 'Roboto Slab', serif;
font-size: 12px;
border-spacing: 0px;
padding: 0px;
line-height: 14px;
vertical-align: baseline;
}
td {
text-align: center;
margin: 0px;
padding: 0px;
}
#armPoles > td {
border-bottom: 5px double black;
margin: 0px;
}
.itemTrue :hover {
color: white;
background: #e4e4e4;
background: -moz-linear-gradient(top, #e4e4e4 0%, #295534 73%, #1d3923 88%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(73%,#295534), color-stop(88%,#1d3923), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
background: -o-linear-gradient(top, #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
background: -ms-linear-gradient(top, #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
background: linear-gradient(to bottom, #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#000000',GradientType=0 );
}
h4 {
font-weight: normal;
}