How to remove that spacing?

**Mike Borozdin** · May 23, 2004 10:17

Hi!

Please, take a look at http://kaeori.borozda.com/layout.php, there's unwanted spacing at the left between the dragon-fly and the leaf with 'Kaeori.Net' text. How can I remove it? cellPadding and cellspacing are set to 0

Code:

 <html>
<head>
<script>
var myImages = new Array()
function preloadImages ()
{
  for ( var i = 0; i < preloadImages.arguments.length; i++ ) {
	 myImages[i] = new Image ();
	 myImages[i].src = "content/images/" + preloadImages.arguments[i];
  }
}
preloadImages ("1index.gif","1info.gif","1help.gif","1links.gif","1forum.gif","1advice.gif","1submit.gif","1search.gif","1copyright.gif","2index.gif","2info.gif","2help.gif","2links.gif","2forum.gif","2advice.gif","2submit.gif","2search.gif","2copyright.gif");
</script>
</head>
<body bgColor = "#FFFFFF" topMargin = "0" leftMargin = "0">
<table border = "0" cellPadding = "0" cellSpacing = "0">
  <tr>
	 <td colSpan = "2">
		<table border = "0" cellPadding = "0" cellSpacing = "0">
		   <tr>
			  <td>
				 <img src = "content/images/dragonfly.gif" width="44" height="56" border="0">
			  </td>
			  <td>
				 <a href="/kaeori/test/" target="main" onMouseOver="document.index.src='content/images/1index.gif'"
				 onMouseOut="document.index.src='content/images/2index.gif'">
					<img src = "content/images/2index.gif" name="index" alt="index" width="98" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="/kaeori/test/info/" target="main" onMouseOver="document.info.src='content/images/1info.gif'"
				 onMouseOut="document.info.src='content/images/2info.gif'">
					<img src = "content/images/2info.gif" name="info" alt="info" width="51" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.help.src='content/images/1help.gif'"
				 onMouseOut="document.help.src='content/images/2help.gif'">
					<img src = "content/images/2help.gif" name="help" alt="help" width="50" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.links.src='content/images/1links.gif'"
				 onMouseOut="document.links.src='content/images/2links.gif'">
					<img src = "content/images/2links.gif" name="links" alt="links" width="58" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.forum.src='content/images/1forum.gif'"
				 onMouseOut="document.forum.src='content/images/2forum.gif'">
					<img src = "content/images/2forum.gif" name="forum" alt="forum" width="68" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.advice.src='content/images/1advice.gif'"
				 onMouseOut="document.advice.src='content/images/2advice.gif'">
					<img src = "content/images/2advice.gif" name="advice" alt="advice" width="66" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.submit.src='content/images/1submit.gif'"
				 onMouseOut="document.submit.src='content/images/2submit.gif'">
					<img src = "content/images/2submit.gif" name="submit" alt="submit" width="71" height="56" border="0">
				 </a>
			  </td>
			  <td>
				 <a href="" onMouseOver="document.search.src='content/images/1search.gif'"
				 onMouseOut="document.search.src='content/images/2search.gif'">
					<img src = "content/images/2search.gif" name="search" alt="search" width="115" height="56" border="0">
				 </a>
			  </td>
		   </tr>
		</table>
	 </td>
  </tr>
  <tr>
	 <td width = "10%" vAlign = "top">
		<img src = "content/images/left1.gif" border = "0" />
		<a href="/kaeori/test/info/copyright.php" target="main" onMouseOver="document.copyright.src='content/images/1copyright.gif'"
		onMouseOut="document.copyright.src='content/images/0copyright.gif'">
		   <img src="content/images/0copyright.gif" name="copyright" alt="website copyright information" width="35"
		   height="150" border="0">
		</a>
	 </td>
	 <td width = "90%" vAlign = "top">
		&nbsp; <br /><br />
	 </td>
  </tr>
</table>
</body>
</html>

**colinr** · May 23, 2004 15:05

i;m not seeing any space under safari

**Mike Borozdin** · May 24, 2004 07:41

But I do see it under IE.

**Paul O'B** · May 24, 2004 09:41

Hi,

You can use css to remove the spacing by setting the image to display:block;

Code:

<style type="text/css">
img {display:block}
</style>

If you have inline images that don't need to be display:block then you can target the specific image with a class or alternatively try seeting all images to vertical-align:bottom:

Code:

<style type="text/css">
img {vertical-align:bottom;}
</style>

Paul

**Mike Borozdin** · May 26, 2004 11:20

Originally Posted by Paul O'B

Code:

<style type="text/css">
img {vertical-align:bottom;}
</style>

Paul

Hi, Paul!

Thank you very much

!!! It is working greatly now!!!

User Tag List

Thread: How to remove that spacing?

Thread Tools

Display

How to remove that spacing?

Bookmarks

Bookmarks

Posting Permissions