Adding A HREF or image map to an image puts 3px L/R padding on image

Question

Hi all --
I'm having an interesting problem.  I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc).  My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. 
I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF=  or using an image map).  Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. 
I can find no way to get rid of this white space other than to remove the link from the image.  There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.
Help! How do I get rid of this white space but still keep the link on the image??
[I've attached a screen shot showing a before/after of the images without/with links]
Thanks in advance!
//kl

Answer 1

First, how are you looking at it?
Internet Exploder frequently adds padding and space -- especially where there is white space in your code (so take that out for a start). Additionally, if you are using Microsoft's non-compliant browsers, you will note that many of them automagically adjust placement of objects and you have to write code specifically to stop that from happening.
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
  width: 185px;
</style>
<![endif]-->
For Internet Exploiter 6, you literally may need to rewrite navigation:
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("../ie6menu/content/menu_ie.css");
</style>
<![endif]-->
Now my menu has a special CSS stylesheet  for that idiotic browser here:
ul#content {
  background-image: url("../content_images/bg.jpg");
  background-repeat: repeat-x;
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
ul#content ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
ul#content ul li {
  background-image: none;
  border-bottom: solid 1px black;
  float: none;
  margin-bottom: -1px;
ul#content li {
  background-image: none;
  border-bottom: solid 1px black;
  float: left;
  margin-bottom: -1px;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
ul#content li ul {
  display: none;
  top: 0;
ul#content li.hover ul {
  display: block;
  position: absolute;
ul#content li.current ul {
  position: absolute;
ul#content li {
  background-image: url("../content_images/center.jpg");
  background-repeat: repeat-x;
ul#content li span {
  background-image: url("../content_images/right.jpg");
  background-position: right top;
  background-repeat: no-repeat;
  display: block;
ul#content li span a {
  background-image: url("../content_images/left.jpg");
  background-position: left top;
  background-repeat: no-repeat;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  height: 20px;
  margin: 0 0 0 0;
  padding: 5px 5px 5px 5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 100px;
ul#content li * a {
  height: auto;
  width: auto;
ul#content li span * a {
  height: auto;
  width: auto;
ul#content ul.level-1 {
  left: 0px;
  top: 100%;
ul#content ul.level-1 li {
  background-image: none;
ul#content ul.level-1 li a {
  background-color: #DA4D33;
  background-image: none;
  border-bottom: dotted 1px #E9E5F9;
  border-left: solid 1px #E9E5F9;
  border-right: solid 1px #656586;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 5px 5px 5px 5px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: 100px;
ul#content ul.level-1 li a.active {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;
ul#content ul.level-1 li * a {
  height: auto;
  width: auto;
ul#content ul.level-1 li span * a {
  height: auto;
  width: auto;
ul#content ul.level-1 li.hover a {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;
ul#content ul.level-1 li.current a.current {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;
ul#content ul.level-2 {
  left: 112px;
ul#content ul.level-2 li {
  background-image: none;
ul#content ul.level-1 ul.level-2 li a {
  background-color: #DA4D33;
  background-image: none;
  border-bottom: dotted 1px #E9E5F9;
  border-left: solid 1px #E9E5F9;
  border-right: solid 1px #656586;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 5px 5px 5px 5px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: 100px;
ul#content ul.level-1 ul.level-2 li a.active {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;
ul#content ul.level-2 li * a {
  height: auto;
  width: auto;
ul#content ul.level-2 li span * a {
  height: auto;
  width: auto;
ul#content ul.level-1 ul.level-2 li.hover a {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;
ul#content ul.level-1 ul.level-2 li.current a.current {
  background-color: #E9E5F9;
  border-bottom: dotted 1px #DA4D33;
  border-right: solid 1px #E9E5F9;
  color: #332151;
  font-weight: bold;
  text-decoration: none;