Ive made my main navigation linkable. The problem is that there are gaps between The images which are links. Its definetly the links because i tried it without links and it works. Why is this happenening and how could I sort it?
I have set img { border: none; }. Still doesnt help though.
<html>
<head>
<style type="text/css">
img
{
border: none;
}
.content
{
padding: 20px 20px 20px;
}
.nav
{
padding: 10px 20px 6px;
font-size: 12px;
}
<!-- links style -->
a:link
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #FFFFFF;
text-decoration: none;
}
</style>
<title> Eportfolio </title>
</head>
<body background="images/bg.jpg">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="652"><img src="images/eportfolio-v1_02.gif"></td>
</tr>
<tr>
<td> <a href="Index.html"><img src="images/eportfolio-v1_04.gif"></a> <a href="Publications.html"> <img src="images/eportfolio-v1_05.gif"></a> <img src="images/eportfolio-v1_06.gif"><a href="Evidence.html"><img src="images/eportfolio-v1_07.gif"></a><a href="Review.html"><img src="images/eportfolio-v1_08.gif"></a></td>
</tr>
<tr>
<td height="35" background="images/eportfolio-v1_09.gif" class="nav">
<span style="margin-right: 20px;"><a href="#">Danceometer</a></span>
<span style="margin-right: 20px;"><a href="#">Music database</a></span>
<span style="margin-right: 150px;"><a href="#">Invitation</a></span>
<span style="margin-right: 20px;"><a href="#">Sponsorform</a></span>
<span style="margin-right: 20px;"><a href="#">Make a catch</a></span>
<span style="margin-right: 20px;"><a href="#">Playlist</a></span>
</td>
</tr>
<tr> <td background="images/eportfolio-v1_10.gif" class="content">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</table>
</body>
</html>The image is attached below
Thanks
Mr.popo
