Line Break After Link?!?!?

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.

Code:

<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:

Code:

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:



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,

 

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