image alignment
-
image alignment
Hi there, me again,
I am trying to get an image centered (vertically) in a table cell, valign="middle" doesn't seem to work?? below you'll find an example of what i mean - it always puts the icon.gif at the top of the cell (as shown by the consultant details section in the right hand side menu) grr, not happy.
any help greatly appreciated,
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Description" content="">
<meta name="KeyWords" content="">
<LINK
REL="Stylesheet"
TITLE="Default Stylesheet"
MEDIA="Screen"
HREF="default.css"
>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Borders -->
<tr class="blank" height="25">
<td>
</td>
</tr>
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr >
<td class="blank" width="6%">
</td>
<td width="88%">
<!-- start of content -->
<!-- header -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="left" class="bluebacked"><img src="tl.gif" width="10" height="25"></td>
<td class="bluebacked" width="*">
</td>
<td valign="top" align="right" class="bluebacked"><img src="tr.gif" width="10" height="25"></td>
</tr>
<tr class="bluebacked" width="100%" >
<td colspan="3">
<p class="header"></p>
</td>
</tr>
</table>
<!-- end of header -->
<!-- main panel -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<!-- main content -->
Main
</td>
<!-- nav panel -->
<td width="125">
<br>
<table border="0" cellspacing="0" cellpadding="0" width="100%" width="125">
<tr>
<td valign="top" align="left" class="bluebacked"><img src="tl.gif" width="10" height="25"></td>
<td class="bluebacked" width="*">
</td>
<td valign="top" align="right" class="bluebacked"><img src="tr.gif" width="10" height="25"></td>
</tr>
<tr class="bluebacked" width="100%" >
<td colspan="3">
<p align="right"> Navigate </p>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr class="blank">
<td>
<table cellpadding="0" cellspacing="0" border="1">
<tr valign="top">
<td width="105"> </td>
<td width="10"> </td>
</tr>
<tr valign="top">
<td width="105"> <div align="right"> <a href=""> Case studies</a> </div></td>
<td width="10"><img src="icon.gif" width="10" height="11" valign="middle"></td>
</tr>
<tr valign="top" >
<td width="105"> <div align="right"><a href="">Interesting sites</a></div></td>
<td width="10"><img src="icon.gif" width="10" height="11"></td>
</tr>
<tr valign="top">
<td width="105"> <div align="right"><a href="">Consultant details</a></div></td>
<td width="10"><img src="icon.gif" width="10" height="11"></td>
</tr>
<tr valign="top">
<td width="105"> <div align="right"><a href="">Tools</a></div></td>
<td width="10"><img src="icon.gif" width="10" height="11"></td>
</tr>
<tr valign="top">
<td width="105"> <div align="right"><a href="">Our consultants</a></div></td>
<td width="10"><img src="icon.gif" width="10" height="11"></td>
</tr>
<tr valign="top">
<td width="105"> </td>
<td width="10"> </td>
</tr>
</tr>
</table>
</td>
<td class="bluebacked">
</td>
</tr>
</table>
</td>
<!-- end of nav panel -->
</tr>
</table>
</td>
</tr>
</table>
<!-- end of content -->
</td>
<td class="blank" width="6%">
</td>
</tr>
</table>
<tr class="blank" height="25">
<td>
</td>
</tr>
</table>
-
Have you tried right clicking the icon/image properties/appearance and selecting absmiddle. Thats how its done in my editor, not sure what one you're using.
-
I code my pages directly, never really bothered with WYSIWYG editors - the code's far too innefficient. Maybe i should start if i get problems like this!
-
You could still use it, instead of valign="top" make it valign="absmiddle".
