Forum Moderators: not2easy

Message Too Old, No Replies

BODY style overriding explicit <A> style

<a> inheriting text-decoration

         

mattglet

11:20 pm on Oct 29, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is my setup:

style.css:
body {font: 12px Verdana, Arial, sans-serif; color: #000000; margin: 0px; padding: 0px}
body a {color: #009900; text-decoration: underline}
body a:visited {color: #009900; text-decoration: underline}
body a:hover {color: #FFFFFF; background-color: #00D600; text-decoration: underline}

default.asp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Default</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>

<body>

<table border = "0" cellpadding = "0" cellspacing = "0" width = "469" style = "text-align: left">
<tr>
<td style = "border-bottom: 1px solid black"><a style = "text-decoration: none" href = "/default.asp"><img src = "/images/button_off_home.gif" width = "94" height = "33" alt = "Home" style = "border: 0px"></a></td>
</tr>
</table>

</body>
</html>

My problem is that the <a style = "text-decoration: none" href = "/default.asp"> link is still getting the underline when I hover it (as specified in the body style), even though I've explicitly set the style right in the <a> tag. How do I make it so the body tag doesn't override everything?

This is happening in Opera 7.53, IE it's fine.

photon

12:41 am on Oct 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's a specificity issue I think.
body a:hover
is more specific than the inline <a> by itself. I'm not sure how to apply pseudo-classes like :hover inline, or even if it's possible.

Perhaps you could add

td a:hover {text-decoration:none;}

in the CSS?

BonRouge

5:35 pm on Oct 30, 2004 (gmt 0)

10+ Year Member



So change "body a {color: #009900; text-decoration: underline} " etc into "a {color: #009900; text-decoration: underline}" etc

mattglet

3:04 am on Nov 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As an update:

I was mistaken as to what my problem was... I thought my links were being underlined, but it was in fact the background color of hover showing up.

I just added a background-color attribute to the links around my images, and all is well. Thanks for the help.