The following code draws and image with black lines bordering it. How do i make the image valign='middle'???<br />
<br />
===================<br />
<br />
<table border='0' cellpadding='0' cellspacing='0' style='height: 1.13in; width: 1.13in;' valign='middle'><br />
<tr bgcolor='#000000' style='height: 0.01 in;'><br />
<td colspan='3'><!-- border --></td><br />
</tr><br />
<tr style='height: 1.11in; width: 1.13in;'><br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td><br />
<td align='center' bgcolor='#ffffff' style='width: 1.11in;' valign='middle'><div style='height: 1.11in; width: 1.11in; overflow: hidden; vertical-align: middle;'><br />
<img valign='middle' border='0' src='http://www.ascensionit.com/monroe/images/uploaded/47_USG.gif'></div><br />
</td><br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td><br />
</tr><br />
<tr bgcolor='#000000' style='height: 0.01in;'><br />
<td colspan='3'><!-- border --></td><br />
</tr><br />
</table><!--content-->This works on IE6:<br />
<br />
<table border='0' cellpadding='0' cellspacing='0' style='height: 1.13in; width: 1.13in;' valign='middle'> <br />
<tr bgcolor='#000000' style='height: 0.01 in;'> <br />
<td colspan='3'><!-- border --></td> <br />
</tr> <br />
<tr style='height: 1.11in; width: 1.13in;'> <br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td> <br />
<td align='center' bgcolor='#ffffff' style='width: 1.11in; overflow: hidden;' valign='middle'><img valign='middle' border='0' src='http://www.ascensionit.com/monroe/images/uploaded/47_USG.gif'></td> <br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td> <br />
</tr> <br />
<tr bgcolor='#000000' style='height: 0.01in;'> <br />
<td colspan='3'><!-- border --></td> <br />
</tr> <br />
</table><!--content-->I can't drop the DIV the way you did. The image* may be larger than the measurements I used in the TD and DIV tags. I need the OVERFLOW:HIDDEN style attribute to truncate the image if it is too big and this does not seem to happen if the OVERFLOW attribute is in the TD element.<br />
<br />
So, I don't specifically need the DIV tag but I need something that will allow me to constrain image.<br />
<br />
Any other ideas on how I can make the image valign='center' AND still truncate the image if it is too big?<br />
<br />
<br />
*NOTE: Assume a random image. I can get the the width and height but dont know how to get the resolution. Thus, I cannot know for sure if an image will fit in a TD of some assigned height. Hence the need for a tag with overflow: hidden.<!--content-->I moved the overflow: hidden; style into the <td> tag that contains the image. I didn't forget that piece of code
<!--content-->
<br />
===================<br />
<br />
<table border='0' cellpadding='0' cellspacing='0' style='height: 1.13in; width: 1.13in;' valign='middle'><br />
<tr bgcolor='#000000' style='height: 0.01 in;'><br />
<td colspan='3'><!-- border --></td><br />
</tr><br />
<tr style='height: 1.11in; width: 1.13in;'><br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td><br />
<td align='center' bgcolor='#ffffff' style='width: 1.11in;' valign='middle'><div style='height: 1.11in; width: 1.11in; overflow: hidden; vertical-align: middle;'><br />
<img valign='middle' border='0' src='http://www.ascensionit.com/monroe/images/uploaded/47_USG.gif'></div><br />
</td><br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td><br />
</tr><br />
<tr bgcolor='#000000' style='height: 0.01in;'><br />
<td colspan='3'><!-- border --></td><br />
</tr><br />
</table><!--content-->This works on IE6:<br />
<br />
<table border='0' cellpadding='0' cellspacing='0' style='height: 1.13in; width: 1.13in;' valign='middle'> <br />
<tr bgcolor='#000000' style='height: 0.01 in;'> <br />
<td colspan='3'><!-- border --></td> <br />
</tr> <br />
<tr style='height: 1.11in; width: 1.13in;'> <br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td> <br />
<td align='center' bgcolor='#ffffff' style='width: 1.11in; overflow: hidden;' valign='middle'><img valign='middle' border='0' src='http://www.ascensionit.com/monroe/images/uploaded/47_USG.gif'></td> <br />
<td bgcolor='#000000' style='width: 0.01in;'><!-- border --></td> <br />
</tr> <br />
<tr bgcolor='#000000' style='height: 0.01in;'> <br />
<td colspan='3'><!-- border --></td> <br />
</tr> <br />
</table><!--content-->I can't drop the DIV the way you did. The image* may be larger than the measurements I used in the TD and DIV tags. I need the OVERFLOW:HIDDEN style attribute to truncate the image if it is too big and this does not seem to happen if the OVERFLOW attribute is in the TD element.<br />
<br />
So, I don't specifically need the DIV tag but I need something that will allow me to constrain image.<br />
<br />
Any other ideas on how I can make the image valign='center' AND still truncate the image if it is too big?<br />
<br />
<br />
*NOTE: Assume a random image. I can get the the width and height but dont know how to get the resolution. Thus, I cannot know for sure if an image will fit in a TD of some assigned height. Hence the need for a tag with overflow: hidden.<!--content-->I moved the overflow: hidden; style into the <td> tag that contains the image. I didn't forget that piece of code
<!--content-->