How do I add captions to images?

[harambeegirl]

I want to add captions under the images in a horizontal <div>. I know about the caption-side property, but W3C says that IE6 does not support that property. I tried it and, sure enough, it does not work. I wonder if it matters that I am not using tables and if that could be why it does not work. Is there another way to add a caption to an image that is supported in all (Opera, Firefox, and Explorer) browsers?

[Reg Edit]

How about using a table?

<table border="0" cellpadding="0" cellspacing="0">	<tr>		<td><img src="images/picture.jpg"></td>	</tr>	<tr>		<td>My caption</td>	</tr></table>

You can then use CSS styles to set the font, line things up and so forth.

[Reg Edit]

(An error occurred while I was adding my reply, and the reply count remained at 0 - so I am adding this new reply to give the reply count a kick!)

[aspnetguy]

Please don't add useless or meaningless content...aka the "post kick" above. This is considered spam.Thanks.

[harambeegirl]

How about using a table?

<table border="0" cellpadding="0" cellspacing="0">	<tr>		<td><img src="images/picture.jpg"></td>	</tr>	<tr>		<td>My caption</td>	</tr></table>

You can then use CSS styles to set the font, line things up and so forth.

For this design, I have been avoiding using tables by using <div> On my first design, I did use tables and my site was not cross-browser compatible. Now all of my images are in a <div>According to the developers at the Microsoft Expression Web Designer forum, if I decide to use <div>, then I should be consistent and use <div> all the way through the site.So, I am rather confused. When is it best to use tables and when is it best to use <div>? Is it good practice to mix the two and put a table inside a <div>?

[S@m]

Do you have an example of what you want to do?

[reportingsjr]

I recomend using divs, there no difference except tables clutter alot, and if the site is decently big it can be hard to navigate through. Also tables have a few more features, like borders and cells and such so they can be easier to use for the "newb" but for most professionals they prefer to use divs cause they got l33t skeelz and can do stuff like that anyways .If you want a caption under an image just put the div and image in their own div, then after the image put a <br /> tag. like so:

<div>stuff...stuff...stuff...stuff...stuff...<div style="width: 200px; height: 200px;"><img src="url" alt="image!!" /><br />Hello, this is an awesome caption isnt it :)</div>stuff...stuff...stuff...stuff...stuff...</div>

[murfitUK]

There's a good tutorial here which I found helpful:http://css.maxdesign.com.au/floatutorial/index.htm

[harambeegirl]

I resolved this by adding a <span> tag before the caption text, inserting an embedded style with wide left/right margins and placing this code below the images.

img.hspace1 {	padding: 0px 30px;	border: none;	margin: 7.5px 0px;}.caption {	margin: 0px 20px;	color: #00CC00;	font-size: small;	font-weight: lighter;}<div id="navmenu" style="visibility: visible"><a href="xxx.htm"><img class="hspace1" src="image1.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image2.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image3.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image4.gif" /></a><a href="xxx.htm"><img class="hspace1" src="image5.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image6.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image7.gif"/></a><span class="caption">TextA</span><span class="caption">TextB</span><span class="caption">TextC</span><span class="caption">TextD</span><span class="caption">TextE</span><span class="caption">TextF</span><span class="caption">TextG</span></div>

[Reg Edit]

Looks like a pretty good approach to me. (Seem to need a BR before the span though?? What browser are you using?)You could also consider whether it would help in this case to make the styles less dependent on the image/caption sizes. For instance:

img.hspace1 {	padding: 0px 30px; 	border: none; 	width: 100px;}.caption { 		padding: 0px 30px; 	color: #00CC00; 	font-size: small; 	font-weight: lighter;	text-align: center;	width: 100px;}