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"


<html xmlns="" xml:lang="en" lang="en">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Lab 7-3</title>


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







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;}




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



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



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



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






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

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

    CSS Validator:

    HTML Validator:


    • 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.