I'm looking to create a web page layout with a footer containing vertically aligned links. To achieve this, I'm currently using a table structure to list out links such as "Mobile", "Help", "Terms", and so on.
The issue I'm facing is that the links in the table become active when hovering over the entire cell, including empty areas. I specifically want the links to be active only when the mouse is directly over the text "Mobile", "Help", "Terms", and not when hovering over any other part of the cell or table.
I've tried to find a solution on Stackoverflow, but most discussions address the opposite problem where people want to activate links across the entire cell.
If anyone can provide assistance, that would be greatly appreciated. The code snippet is provided below.
HTML CODE
<div id="footer">
<div class = "box2">
<h6><a href="/error">Français</h6>
<h6><a href="/error">English (US)</h6>
<h6><a href="/error">Español</h6>
<h6><a href="/error">Português (Brasil)</h6>
<h6><a href="/error">Deutsch</h6>
<h6><a href="/error">Italiano</h6>
<h6><a href="/error">Русский</h6>
</div>
<div class = "box3">
<table class="table2">
<tr>
<td><h6><a href="/mobile">Mobile</h6></td>
<td><h6><a href="/help">Help</h6></td>
<td><h6><a href="/term">Terms and conditions</h6></td>
<td><h6><a href="/developers">Developers</h6></td>
<td><h6><a href="/carriers">Carriers</h6></td>
<td><h6><a href="/other">Other</h6></td>
</tr>
<tr>
<td><h6><a href="/blog">Blog</h6></td>
<td><h6><a href="/findus">Find us</h6></td>
<td><h6><a href="/pics">Pics</h6></td>
</tr>
</table>
</div>
</div>
CSS CODE
#footer {
height: 110px;
background: #80B2E6;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80B2E6), color-stop(100%,#3385D6));
background: -moz-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
background: -webkit-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
background: -o-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
background: -ms-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
background: linear-gradient(top, #80B2E6 0%, #3385D6 100%);
}
.box2
{
width:800px;
border-bottom:1px solid lightgrey;
display:inline-block;
padding-top:20px;
}
.box3
{
width:800px;
padding:0;
}
.table2 {
width:450px;
padding:0;
font-size:11px;
table-layout: auto;
float:left;
border-collapse:collapse;
}
h6 {
font-weight: normal;
font-size: 11px;
max-width: 800px;
color: white;
margin:0;
padding-bottom:3px;
padding-right:10px;
/*display:inline-block;*/
float:left;
}
h6 a:link {
color:white;
}
.table2 td a {
color:white;
display:inline;
}
a:link {
text-decoration:none;
color: #54544B;
}
table {
width:420px;
/*height: 200px;*/
padding:10px;
margin-bottom:10px;
border-collapse:collapse;
table-layout: fixed;
}
td
{
text-align:center;
position:center;
padding-top: 3px;
padding-bottom: 3px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
tr, div {
}