CSS Popup Image Viewer: Caption Width

[mattgb1]

I totally love the CSS Popup Image Viewer control but when I add long caption text to the enlarged image (as in example below), the text wraps to the width of the thumbnail. The only width setting I can find is the thumbnail's width, and I don't want to stretch that out. What can I do?


<a class="thumbnail" href="#thumb">
Images/KNO07230.JPG<span>
Images/KNO07230.JPG
Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span>
</a>
Let's say the tumbnail is 1 inch wide, and the larger image it brings up is 3 inches wide. The text that I add below it (let's call it a caption) wraps inside of a 1-inch wide space. In the example below, I deliberately added a large string ("Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.") to illustrate how this wrapping occurs.

What do I need to do in order to set the text-wrapping space's width to the same width as the image?

[Veronica]

The text should wrap, or at least it does when I try it. (BTW, make sure you always include a link to the DD script in your posts too)

If it isn't, you can try setting the width of both pics:



<a class="thumbnail" href="#thumb"><img src="small.gif" style="width:100px; height:66px; border:0; margin: 10px 10px;" /><span><img src="large.gif" style="width:300px; height:150px; border:0;" /><br />Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span></a>


And if that doesn't work, post a link to your actual page, maybe its another issue

[mattgb1]

Yes, of course the text wraps, but it wraps too much. :confused: My picture is 3 inches wide but the caption wraps to a width of only one inch.

Here's the whole page. Note how the picture caption is way narrower than the picture.

<div>
<strong>These examples use the CSS Popup Image Viewer</strong><br />
<br />

<br />
<a class="thumbnail" href="#thumb">
<img src="Images/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span>
<img src="Images/ocean.jpg" /><br />Notice that the caption is-word-wrapped to the width of the thumbnail.</span></a>

<br />

<br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span>
<img src="Images/zoka.gif" />
<br />Zoka Coffee</span>
</a>

</div>