why is the text under image not aligned?

[mp3province]

Hi Guys,

http://www.chantik.in/theodyssey/hope.html
http://www.chantik.in/theodyssey/cssgallery4.css

The text under the enlarged images, when using IE 6.X does not appear in a single line. Rather, its shows as one word per line (see in image below):

http://www.chantik.in/theodyssey/ie.JPG

This does not happen in Firefox 1.5. Do you know to fix this? Also, is there a way of getting the text to be right underneath the image and in bold?

Any help really appreciated. Thanks for all your help.

Regards,
Akshay

[WebJoel]

I think that in your css, that:

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

is going to disrupt your text in the HTML:

<tr>
<td><a class="thumbnail" href="#thumb"><img src="images/odyssey1colourthumb6045.jpg" width="60" height="45" border="0" /><span><img src="images/odyssey1colour.jpg" /><br />Right side of the entrance. Seating area towards the back</span></a></td>

because the SPAN includes the <br /> and the text after it. I would try to end the SPAN, then do <br /> followed by the text. Make the text behave with rules other than those that are meant for the images..

I do see what you mean though. And it's not just Firefox. I see some weird things happening with IE as well.
I haven't examined your code too closely yet though and this may not be the solution either..

edit: oops! -Tried that... not the effect we're after...

[WebJoel]

Got it: (I think... it seems to work for me here)

.thumbnail:hover span{ /*CSS for enlarged image*/
display:inline;
visibility: visible;
top: 93px;
left: 150px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

edit:
Hmm... seems to work even without this. Did you change something from last night? Last night it was behaving like the attached image you showed. Today though, it is not. It is performing correctly, ergo, the 'display:inline;' isn't fixing any problem...