I recently created a roll over effect with a div and it's containing text. This could be seen Here

The part at question is the Shared | Reseller bit under the first black gradient rectangle. My problem is that there's a dark line under the text. It's not the underline effect, as it is much too close to it, and I've also tried to enable "text-decoration: underline;" command. In this case, both lines pop up.

I really don't know what the cause of this could be. Any help is greatly appreciated.

you can't have BOTH of these

   <div id=catshared>
   <a href=shared.php> <h1 class=catshared><span class=catshared><br>
Shared Web Hosting </span></h1> </a> 
      </div>

(id=catshared & class=catshared)

it needs a proper DTD

the multiple <!-- -->s need to be removed from the style sheets

for a start

the line appears to be the body background showing though a gap in the layout BTW change the colour in the body to test it

I've changed those up as you've suggested and have tried that background-color switch for the body element, and it doesn't seem to be the cause.

When I switched the body color to blue, the line under the text was still just as visible.

You also should NOT wrap an H1 inside an <a></a> tag. You must put the link inside the H1.

Yeah, I changed that after figuring out that it doesn't validate, earlier this morning. However it doesn't appear to be the problem either.

Here's the code in question:

  <div id=catshared>
    <h1 class=cattextshared><a href=shared.php><span class=cattextshared><br>
Shared Web Hosting </span> </a> </h1>
      </div>

and the CSS:

#catshared{

font-family:Arial;      
float:left;
height: 25px;
width: 323px;


}


a .cattextshared {

color: #5b97b1;
padding-bottom: 10px;
text-align: center;
background:url(new/catleft2.jpg) no-repeat;
display: block;

}

a:hover .cattextshared   {

color: #FFFFFF;
background:url(new/catlefta.jpg) no-repeat;
}


h1.cattextshared {
font-size:14px;
}

I have another set of code for the other button, but it basically consists of the same code, with different ID and Class names.

a .cattextshared {

color: #5b97b1;
padding-bottom: 10px;
text-align: center;
background:url(new/catleft2.jpg) no-repeat;
display: block;

}

That isnt' going to work with this:

<a href=shared.php><span class=cattextshared><br>
Shared Web Hosting </span> </a>

..because .cattextshared isn't applied to the <a> but to the <span>. Why do you need the span anyway ? Put the class on the <a> and be done with it.

<a class="cattextshared" href="shared.php">Shared Web Hosting</a>

Looks like that did it! Here's the final HTML:

   <div id=catshared>
    <h1 class=cattextsharedh1><a href=shared.php class=cattextshared><br>
Shared Web Hosting </a> </h1>
      </div>

and the CSS:

.cattextshared {
padding-bottom: 10px;
text-align: center;
background:url(new/catleft2.jpg) no-repeat;
display: block;       
}

a.cattextshared:link {color: #5b97b1; text-decoration:none;}

a.cattextshared:active {color: #5b97b1;text-decoration:none; }

a.cattextshared:visited {color: #5b97b1;text-decoration:none; }

a.cattextshared:hover {color: #FFFFFF; background:url(new/catlefta.jpg) no-repeat; text-decoration:none;}

Thanks a bunch!

You're welcome, glad that solved it