Radbrytning som inte gör vagnretur

Titta på http://tavlingar.se/test.html

Sidan består av två rader. Den översta raden består av två 16x16 gif-bilder följt av en text. Den understa raden består av tre 16x16 gif-bilder följt av en text.

Problemet är att radbrytningen efter texten på den översta raden inte gör att texten på den andra raden börjar längst till vänster. Istället börjar texten på rad två under texten på rad ett. Detta inträffar då jag använder en liten storlek på typsnittet, vilket jag måste. Om jag använder en större storlek fungerar radbrytningen.

Koden ser ut så här:

<font face="verdana" size="1">
<img vspace="0" hspace="0" align="left" src="1.gif" width="16" height="16" border="1">

<a href="somefile1.asp">
<img vspace="0" hspace="0" align="left" src="2.gif" width="16" height="16" border="1">
Klicka här</a>

<br>

<img vspace="0" hspace="0" align="left" src="3.gif" width="16" height="16" border="1">
<img vspace="0" hspace="0" align="left" src="4.gif" width="16" height="16" border="1">
<img vspace="0" hspace="0" align="left" src="5.gif" width="16" height="16" border="1">

<a href="somefile2.asp">Klicka här</a>
</font>

Jag löser problemet genom att vertikalt rita ut några pixlar efter texten på rad 1 enligt:

]<font face="verdana" size="1">
<img vspace="0" hspace="0" align="left" src="1.gif" width="16" height="16" border="1">

<a href="somefile1.asp">
<img vspace="0" hspace="0" align="left" src="2.gif" width="16" height="16" border="1">
Klicka här</a>[b]<img vspace="0" hspace="0" src="pixel.gif" width="1" height="14" border="0">[/b]

<br>

<img vspace="0" hspace="0" align="left" src="3.gif" width="16" height="16" border="1">
<img vspace="0" hspace="0" align="left" src="4.gif" width="16" height="16" border="1">
<img vspace="0" hspace="0" align="left" src="5.gif" width="16" height="16" border="1">

<a href="somefile2.asp">Klicka här</a>
</font>

Men det verkar inte vara en bra lösning. Vad skall jag göra?