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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...

<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

Relevance
  • Anonymous
    7 years ago
    Favorite Answer

    You have a right border set for all link tags which is stated improperly anyway:

    a {margin: 0 0 1;

    font-family: Sans Serif;

    padding: 5px 10px;

    right-border: 5px;

    border-right-color: #ff1828}

    Images inside link tags will inherit the CSS rules you have set for those links.

    a img {

    text-decoration: none;

    border: 0;

    }

    or maybe you need this:

    div#links a img {

    text-decoration: none;

    border: 0;

    }

    Validate your code:

    Why Validate?: http://validator.w3.org/docs/why.html

    CSS Validator: http://jigsaw.w3.org/css-validator/

    HTML Validator: http://validator.w3.org/#validate_by_uri+with_opti...

    Ron

    • Login to reply the answers
  • 7 years ago

    Try css border: none; or border: 0;

    I hope this helps,

    • Login to reply the answers
Still have questions? Get your answers by asking now.