Google A simple image caption with html table

May 8, 2011

A simple image caption with html table

I wanted to have image caption in my images.Tried with simple CSS and worked fine.But sadly it didn't work with Internet explorer.

To work with internet explorer image caption CSS need to be declare the width and height,other wise it show messy.The image remain same but the class take the whole are dropping every other object below.The declaring of width and height of CSS div for image caption is hell of a hectic job.

I just wanted to have an image with caption that can be float left or right and other object floating beside or around it.Thus I find old conventional html table more usable.


How to set an Image caption -explained


About this code
Simple table is used.
No border or background for image,You might use yourself.
You can add background to caption text and make it smaller size,I use big font to clear fact.



Demo:


Caption text here







[HTML]


<table cellpadding="0" cellspacing="0" class="my-caption-table">
<tbody><tr>
<td style="text-align: center;">
<img border="0" src="flower.jpg" alt="" title="" style="clear:left;" />
</td>
</tr><tr>
<td class="my-caption-text">Caption text here</td>
</tr></tbody>
</table>




[CSS]



<style type="text/css">
.my-caption-table
{
float:left;
margin:10px 10px 10px 10px;
padding:3px 3px 3px 3px;
text-align:left;
word-wrap:break-word;
border:1px solid #190707;
}
.my-caption-text
{
font-size:12px;
color:#191007;
text-align: center;
}
.my-caption-table img
{
background:none;
border:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

}





No comments:

Post a Comment