Member Avatar for Mr.popo

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

  • 2 Contributors
  • 2 Replies
  • 87 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Mr.popo

Dani AI

Generated

A quick summary and why the fix worked: had small gaps appear only when the nav images were wrapped in links. ’s fix (resetting margin/padding/border on the anchors and images) removed the symptom, which is why the problem appeared to vanish — removing any default spacing or borders can hide the visible gap. The underlying cause, however, is usually whitespace and baseline alignment behavior of inline elements, not borders.

Common root causes and practical fixes:

  • The HTML between inline elements (spaces/newlines) becomes rendered whitespace. Removing that literal space (putting tags together) or collapsing it with a comment removes the gap.
  • Images sit on the text baseline by default and can leave descender space. Setting the image to remove baseline alignment or making it block-level prevents that gap.
  • Converting links/images to floated or inline-block elements (and clearing floats if needed) also produces a tight horizontal layout.

Two simple approaches to try (safe, widely supported):

  • Make the linked image not use baseline spacing (for example, make the image block-level inside the link).
  • Eliminate inter-element whitespace in the HTML (put closing and next opening tag immediately adjacent) or set the container to font-size:0 and restore sizes on children.

For background reading on inline/inline-block behavior and vertical alignment, see the MDN docs on display and vertical-align and this CSS-Tricks article on inline-block spacing:

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

Put the following style on both the a tag and the img tag:

.nosurr {margin: 0; border: none; padding: 0;}

Thus turns off margin, border, and padding.

Member Avatar for Mr.popo

Thankyou. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.