Html code help! Hovering text problem?

so i need to make text hover below a picture. It works except for red margins showing up to the left and right of the pictures. here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ... show more so i need to make text hover below a picture. It works except for red margins showing up to the left and right of the pictures.

here is the code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 7-3</title>
</head>
<style type="text/css">
<!--
a {margin: 0 0 1;
font-family: Sans Serif;
padding: 5px 10px;
right-border: 5px;
border-right-color: #ff1828}

div#links img {border:none;}
div#links a {display: block;
float:left;
width:200px;
height:200px;
text-decoration:none;
margin-right:20px;
position:relative;}

div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute;
top: 210px;
left: 0;
width: 180px;
padding: 5px 10px;
margin: 0 0 1px;
z-index: 100;
color: #fff;
background: #000;
font: 10px sans-serif;
text-align: center;}

-->
</style>
<body>

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" />
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p>

<div id="links">
<table style="text-align: center">
<tr>

<td>
<a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine" /><span>PUT TEXT HERE</span>
</td>

<td>
<a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" /><span>PUT TEXT HERE</span>
</td>

<td>
<a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" /><span>PUT TEXT HERE</span>
</td>
</table>
</div>

</body>
</html>

this is what the book is asking for:

A. links should be sans-serif font with padding of 5 and 10 pixels and margins of 0 0 1 pixels; the right border should be 5 pixels and color #ff1828

B.when a user hovers over a link, the right border should be style double with 5 pixels in white

C. at start up there should be no display of text beneath the images; use the <span></span> tags to control the display of text pop-up upon hovering; position the block of text as absolute with a top margin 220 and a left margin of 550; the width of the block should be 180 should be 180 pixels at a minimum, use padding of 5px and margins of 10px, the text should be white on black background

THANK YOU for any help
2 answers 2