Line Break After Link?!?!?

[Mada_Milty]

Hello all,

I have the following HTML code. I intend this to be a picture link followed by a row of text links, and another image link.

<img src="images/raisedback.jpg" class="nav" name="tback" alt="Back" align="left" onmouseover="backOver()" onmouseout="backOut()" /></a><a href="#tourpics" class="speed">-1-</a><a href="#tourpics" onclick="javascript: tour_click(1)"><img src="images/raisedforward.jpg" class="nav" name="tforward" alt="Forward" align="right" onmouseover="forOver()" onmouseout="forOut()" /></a>

The following is the stylesheet applied to this page:

body {
background-color: #100066;
background-image: url(images/background.jpg);
background-position: center;
background-repeat: repeat-y;
margin: 0 auto 0 auto;
text-align: center;
width: 600px;
}

a.zoom {
background-color: #666699;
color: #FFFFFF;
font-family: arial;
height: 32px;
display: block;
}

a.speed {
background-color: #666699;
color: #FFFFFF;
font-family: arial;
height: 40px;
display: inline;
}

a:link#contact {
color: #FFFFFF;
}

a:visited#contact {
color: #FFFFFF;
}

a:hover#contact {
color: #3366FF;
}

a:active#contact {
color: #FFFFFF;
}

div.banner {
background-color: #666699;
display: block;
margin: 0 auto 0 auto;
text-align: left;
width: 100%;
}

div.banner#buttons {
background-color: #666699;
display: block;
margin: 5px auto 0 auto;
text-align: left;
width: 100%;
}

div.deskur {
background-color: #666699;
display: inline;
text-align: center;
width: 153px;
}

span.statement {
background-color: #FFFFFF;
color: #100066;
display: block;
font-family: arial;
font-size: 24px;
font-weight: bold;
margin-top: 5px;
overflow: auto;
text-align: center;
width: 447px;
}

span.title {
background-color: #FFFFFF;
color: #100066;
display: block;
font-family: arial;
font-size: 20px;
font-weight: bold;
margin-top: 5px;
overflow: auto;
text-align: left;
width: 600px;
}

span.award {
background-color: #FFFFFF;
color: #100066;
display: block;
font-family: arial;
font-size: 20px;
font-weight: bold;
margin: 5px 0 5px 0;
overflow: auto;
text-align: left;
width: 600px;
vertical-align: text-top;
}

table {
border: 0;
margin: 0;
padding: 0;
}

form {
display: block;
margin-top: 10px;
}

input {
margin: auto 10px auto 10px;
width: 115px;
}

select {
margin: auto 10px auto 10px;
width: 122px;
}

ul {
color: #FFFFFF;
font-family: arial;
text-align: left;
}

ul.statement {
color: #FFFFFF;
font-family: arial;
font-weight: bold;
margin-left: 135px;
padding-left: 40px;
text-align: left;
}

img {
border: 0;
margin: 0;
padding: 0;
}

img.tour {
border: 5px solid #100066;
height: 370px;
margin: 5px auto 5px auto;
padding: 0;
width: 590px;
}

img.nav {
display: inline;
}

img.footer {
border: 0;
margin: 5px auto 5px auto;
padding: 0;
}

.style1 {
color: #FFFFFF;
font-family:arial;
}

.style2 {
background-color: #FFFFFF;
color: #100066;
display: block;
font-family: arial;
font-weight: bold;
height: 19px;
text-align: left;
}

.style3 {
background-color: #666699;
color: #FFFFFF;
display: block;
font-family:arial;
font-size: 12px;
font-style: italic;
text-align: left;
}

.style4 {
background-color: #666699;
color: #FFFFFF;
display: block;
font-family:arial;
font-size: 12px;
margin-bottom: 5px;
text-align: left;
}

.style5 {
color: #FFFFFF;
display: block;
font-family:arial;
margin-top: 5px;
text-align: left;
}

However, the link is off-center, and adds a linebreak before the last image link, causing it to look like this:

http://img237.imageshack.us/img237/1539/linkroweu2.gif

I've tried just about every combination of display types (block, inline, inline-block -moz-inline-block) and container types (div, span, body), and cannot get these to line up. Can anyone see where I'm going wrong?

TIA

Milty,

[Mada_Milty]

NVM... I broke down and used a table...