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>
<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