ProductivePC - 7:18 am on Oct 15, 2004 (gmt 0)

Thank you two for your answers. I have been doing a lot of reading. I took both of your suggestions on top of a lot more reading on the W3 website and got something semi-working. The text is lined up now. I needed a position:static instead of a position:relative in there for the image and I also added a div tag within the text link in order to get it to center out. Whether or not this is properly written, I do not know.... I am not quite up to the point of understanding the difference between inline and other sorts. I am getting there :)

Anyway, the problem that I am having is the effect I am going after. When a user rolls their mouse over the image to the left I want the text link to light up. According to what I have, this should happen. It was happening until I put the div tag in. In IE you still see the text link light up when your mouse rolls over the images... In NN, Opera, and FF you do not. I believe I can probably hack around this with a a.doglink:hover and light it up as someone rolls over the image however but I shouldn't have to since I have it set to highlight all links. Any Suggestions? Did I screw something up with the way that I wrote it?

New CSS
html, body {margin: 0; padding: 0;}

a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#dlb {
float:left;
background: #DAE0D2 url("bg-right.gif") repeat-y;
margin: 0px 0px 0px 0px;
display:block;
width:160px;
border:1px
border-top: 0px solid #dddddd;
border-right: 1px inset #000;
border-bottom: 1px inset #000;
border-left: 1px solid #bbbbbb;
height:568px;
padding:0px 0px 0px 0px;
}

.dlbg {
background-image:url('image.gif');
background-repeat: repeat-x;
float:left;
width:140px;
height:100px;
padding:0px 0px 0px 0px;
margin:5px 0px 5px 0px;
border:1px;
border-style: dashed;
position:relative;
top: 4px;
left: 9px;
}
.image {
position:static;
margin:4px 0px 0px 28px;
border:1px;
border-style:solid;
display:block;
}
.doglink {
font-weight:bold;
font-family: verdana,tahoma,arial,sans-serif;
text-decoration:none;
font-size:9pt;
}
.centerlink {
text-align:center;
}

New HTML

<div id="dlb">
<span class="dlbg"><a class="doglink" href=""><img alt="*" class="image" src="image.jpg" /><div class="centerlink">Puppies</div></a></span>
<span class="dlbg"><a class="doglink" href=""><img alt="*" class="image" src="image.jpg" /><div class="centerlink">Belgian Malinois</div></a></span>
</div>

[edited by: SuzyUK at 9:00 am (utc) on Oct. 15, 2004]
[edit reason] removed excess code [/edit]