text under picture ... not

[WebMachine]

I'm pretty inexperienced still, so you will be hearing a lot from me over the next few days as I try to finish up this website for Sweetiepies Inc. On my products page, I planned to have a thumbnail, with a title under the picture, of each type of chocolate pizza which turns into a larger image with a description when the mouse hovers over it. So far so good, except for the second thumbnail from the left on the top row - for some reason part of the title has snuck up behind the image. This didn't happen for any of the others, so for the life of me, I can't figure out what went wrong. I have attached a screen shot of the page in question. Note: the images are just dummy images right now (all the same), but I will change that soon. Could you please give me some idea of what issues to look for in my coding?

[Paul O'B]

It's a bit hard to tell without the code that goes with it

You haven't forgotten something simple like forgetting to put a break (<br>) before the text have you ?

[WebMachine]

Yes, you were right. Thanks. I'm curious, though. Exactly the same code was repeated for each thumbnail so why didn't this problem show up with the other ones? By the way, I added the <br> to all the sections before I copied the code below. Nothing else was changed.

My html code:

<div id="crispndeliscious" class="pizza"> <a href="images/Pizza1Large.htm"><img class="thumbnail" src="images/Pizza1Small.jpg" 
alt="Ebony and Ivory Pizza" width="100" height="100" /><span><img 
src="images/Pizza1Large.jpg" alt="Rocky Road Pizza Ingredients" width="400" 
height="400"/></span><br>Crisp and Deliscious Pizza</a></div>

My CSS code:

.pizza:hover, #doityourself {background-color: transparent;
			z-index: 50;}
 
.pizza span, #doityourself span{ /*CSS for enlarged image*/
		position: absolute;
		left: -1000px;
		visibility: hidden;
		text-decoration: none;}
 
.pizza span img, #doityourself span img{ /*CSS for enlarged image*/
		border: 2px solid #4A2E00;}
 
.pizza:hover span{ /*CSS for enlarged image on hover*/
		visibility: visible;
		top: 0;
		left: 60px; /*position where enlarged image should offset horizontally */}

[Paul O'B]

Hi,

I'm curious, though. Exactly the same code was repeated for each thumbnail so why didn't this problem show

At a guess I'd say it was because there just happened to be more room for that piece of text so it didn't wrap but that's just a guess

I'd need to see the whole page to give proper answer