positioning not working for firefox

[Kysmiley]

For some reason this looks good in IE 6 and in firefox the top 4 buttons look great line up as they should then on image 5 and 6 they are out of aline and on seven it looks like it should also. here is some coding i hope someone can help me figure this out
#######################
CSS
/*Left container */

#left
{
float: left;
width: 19.25%;
height: 400px;
display: inline;
text-align: center;
background-image:
url(../images/tge-sb.jpg);
background-repeat:
no-repeat;
margin: 0%;
padding: 0%;
}
/*left menu buttons numbered top to bottom*/
img.left1
{
position: relative;
top: 25px;
margin-left: -10px;
border: none;
}
img.left2
{
position: relative;
top: 30px;
margin-left: -10px;
border: none;
}
img.left3
{
position: relative;
top: 35px;
margin-left: -10px;
border: none;
}
img.left4
{
position: relative;
top: 40px;
margin-left: -10px;
border: none;
}
img.left5
{
position: relative;
top: 45px;
margin-left: -12px;
border: none;
}
img.left6
{
position: relative;
top: 50px;
margin-left: -12px;
border: none;
}
img.left7
{
position: relative;
top: 55px;
margin-left: -12px;
border: none;
}
#######################
HTML
<div id="left">
<a href="./music.php"><img src="./images/tge-ourmusic.jpg" class="left1" style="border: none;" alt=""></a>
<a href="../links.php"><img src="./images/tge-links.jpg" class="left2" style="border: none;" alt=""></a>
<a href="./bios.php"><img src="./images/tge-bios.jpg" class="left3" style="border: none;" alt=""></a>
<a ="../events"><img src="./images/events.jpg" class="left4" style="border: none;" alt=""></a>
<a href="./calendar1/"><img src="./images/tge-cal.jpg" class="left5" style="border: none;" alt=""></a>
<a href="./"><img src="./images/tge-home.jpg" class="left6" style="border: none;" alt=""></a>
<a href="../"><img src="./images/main.jpg" class="left7" style="border: none;" alt=""></a>
</div>
###################
Thanks Pat

Almost fixed but IE seems to be about 45px higher than firefox. is there a hack to fix this here is the new CSS coding
#####################
img.left1
{
position: absolute;
top: 245px;
margin-left: -60px;
border: none;
}
img.left2
{
position: absolute;
top: 285px;
margin-left: -60px;
border: none;
}
img.left3
{
position: absolute;
top: 325px;
margin-left: -60px;
border: none;
}
img.left4
{
position: absolute;
top: 365px;
margin-left: -60px;
border: none;
}
img.left5
{
position: absolute;
top: 405px;
margin-left: -60px;
border: none;
}
img.left6
{
position: absolute;
top: 445px;
margin-left: -60px;
border: none;
}
img.left7
{
position: absolute;
top: 485px;
margin-left: -60px;
border: none;
}
Thanks again

[eljaykay]

Hi -
Please bear in mind that it's better to design for Firefox and then to tweak to accomodate for IE - which accepts sloppy coding and has a load of glitches.

I also shy away from absolute positioning - unless absolutely necessary! You also might want to wrap those links in an unordered list [as list items - the classic navigation strategy in css] or a paragraph to control overall size of the nav. area.

Or have you considered using background images on the links - each with a different id?

Good luck,
El