previous/next arrows horizontally aligned to the the texts

[dansbanners]

Hi,

How do you perhaps supposedly make the previous / next arrow graphics somewhat 180 degrees, horizontally aligned next to the previous / next texts? Kinda like the following effects:

<= Previous or Next =>

I currently have it written as the following whereas the arrow graphic isn't quite horizontally aligned next to the text:

<a href="">
<img align="bottom" src="previous.gif" alt="previous arrow" width="12" height="16" /></a>
<a href="">Previous Entries</a>

In the meantime, the following old source code of mine does the trick. But tables are kinda considered "outdated" at this point:

<table border="0" width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><a href=""><img src="previous.gif" border="0" width="12" height="16" align="middle" alt="Previous"></a></td>
<td>&nbsp;<a href="">Previous Speaker</a></td>
<td width="29"></td>
<td align="right"><a href="">Next Speaker</a>&nbsp;</td>
<td><a href=""><img src="next.gif" border="0" width="12" height="16" align="middle" alt="Next"></a></td>
</tr>
</table>

Thanks!

[hobbes]

Tables still serve their function. And although browsers have come a long ways, vertical alignment is still easiest & best handled by tables (especially cross-browser), unless you have a completely fixed design.

[dansbanners]

Originally Posted by hobbes

Tables still serve their function. And although browsers have come a long ways, vertical alignment is still easiest & best handled by tables (especially cross-browser), unless you have a completely fixed design.

Ok, but vertical alignment? Are you sure it shouldn't be horizontal alignment as in "horizontal rule"?

[hobbes]

The term vertical alignment is from a td element's valign property.

[dansbanners]

Ok, I thought I'd post the codes I settled on to perhaps help some members out there reading this thread:

.alignleft {
float: left
}

.alignright {
float: right;
}

<div class="alignleft">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href=""><img align="middle" src="previous.gif" 
        alt="previous arrow" width="21" height="21" /></a></td>
      <td>&nbsp;<a href=""> Previous Entries</a></td>
    </tr>
  </table>
</div>
<div class="alignright">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td><a href="">Next Entries</a>&nbsp;</td>
     <td><a href=""><img align="middle" src="next.gif" 
       alt="next arrow" width="21" height="21" /></a>
     </td>
   </tr>
 </table>
</div>