Invisible spacer?

I dont see why the first mouseover positions itself unevenly as the ones below.
(the thumbnails)
Can someone help me?

Not sure exactly what the problem was but you can resolve it by setting the anchors as display:block;

You should hide and reveal the spans with margins rather than positioning. You are also illegally nesting a block level p tag (“click to enlarge image”) in your anchor. Best to make that a span.

Try this

position: relative;

background-color: transparent;
z-index: 50;

[B].thumbnail span[/B]{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
[B]top: 0;
margin-left: -999em;[/B]
border: 1px dashed gray;

color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

[B].thumbnail:hover span[/B]{ /*CSS for enlarged image on hover*/
[B]margin-left: 0;[/B] /*position where enlarged image should offset horizontally */


Hi, unless I’m mistaken on the position you want hte thumbnail just set the anchors to display:block and then update the positioning

.thumbnail a{display:block;}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 100%; /*position where enlarged image should offset horizontally */


In regards to what I mentioned above you can fix that by using a “b” element since it is an inline. That will avoid any conflict with the AP span styles getting passed down in the cascade or needing to be reset (if you were to use a span that I suggested originally).

Replace those “p” tags with a “b” tag like this -

<a class="thumbnail" href="d">
<img src="i/doll1/thumb1.jpg" alt="thumb1.jpg" width="50">
<img src="i/doll1/thumb1_large.jpg"><br>
Click image to enlarge

Then set the #mainright p styles on that “b” element in the css

[B].thumbnail span b[/B] {
font: normal 12px arial, sans-serif;