CSS Hover causes img to shift over

HTML & CSS
1

Hello.

I’m trying to do a disjointed CSS rollover. I think that’s what it’s called.
The page is at Irish Kerns – Mercenaries

The problem is in Explorer.
When I hover over the links toward the bottom, “Scotland” & “Ireland”, the rollover image shifts a pixel or 2 leaving a red “border” around it.
The a:hover color is red.

Anyway, the page displays fine in Firefox.

Here’s the CSS for that part of the page:



/********************* Merc Pages **********************/


#info { display: block; }
span { display:none; }	

ul#info { width: 600px; height margin: 0 0 0 10px; }
#reg_list { width: 200px; }
#reg_list a { display: block; 
              font: normal normal 1.4em/.7em Arial, Helvetica, sans-serif;
			  background-color:#FFFFFF;
			  color: #000; 
			  width: 175px; 
			  padding: 10px;
			  }
#reg_list a:hover { color: #FF0000; }

#map {
	width:411px;
	height:250px;
	
    margin: 0 0 0 200px;
	background-image: url(../Mercs/images/regions/world.jpg) }


#reg_list { float: left;  }


#reg_list a:hover span  {
    visibility: visible;
	display:block;
	position:absolute;
	left:379px;
	top:411px;
	width:411px;
	height:250px;
	min-height: 0;
	 }

#reg_list h3 { padding-left: 10px; margin: 0; }
2

I’m using Firefox and I get a red border.

http://stommepoes.nl/redborder.png

You never removed the default border of images in your stylesheets for those images… and when they’re in an anchor, they’ll take the colour of the anchor for their border colour.

I use this near the top of my stylesheets, because I almost never want borders on my images:

img {
vertical-align: bottom; /to remove gap under images if left inline/
border: 0;
}

the border: 0 part.

A tip on rollovers:

don’t set major layout thingies on the pseudo-class state. Set everything you need at the beginning (and pull the image off-screen instead of diplay: none/block with a -9999px or something), and change only the position on :hover/:focus (and yeah, you’ve got anchors already, so let keyboard users get some goodness with :focus).

IE6 might give you some surprises : )

3

Thanks Stomme poes.
I added that code and it looks like it’s working, at least on my end.

I looked at it on another computer last night and it was something totally different than what I had on my machine.
Why is this? What do I need to do to make it uniform?
And could you elaborate on what you mean by “setting everything I need at the beginning”?
I changed the span { display: none; } to span { display:block; position: absolute; left: -9999em; }. Looks good, but now there’s a “bump” when I hover over one of the links.