Home/ Questions/Q 7627015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T05:24:12+00:00

I’m trying to use CSS block links in my web site. I want to

  • 0

I’m trying to use CSS block links in my web site. I want to have light background with white fonts when the link is passive and dark background with white fonts when you hover over the link or if the link is active (the left button pressed but not released). And I don’t want the font color to change. I’ve tried this on IE9, FF 7, Chrome 17 with the following code:

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<<style type="text/css">
a.header:link {
text-align:center;
display:block;
font-weight:bold;
font-color:white;
background:lightgreen;
width:112px;
text-align:center;
padding:4px;
text-decoration:none;
outline-style:double;
outline-color:green;
}
a.header:hover,a:active {
background-color:darkgreen;
text-align:center
font-color:white;
}
</style>
</head>
<body>
<div><h1><a class="header" href="http://www.vk.com">www 999</a></h1></div>
</body>
</html>

Unfortunately the code’s behaviour is unpredictable. Font color is always dark (I want white), sometimes red if the link is active and the background is changing different way on different browsers
Can somebody help me to make this work the same way on popular browsers?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • There is no such thing as font-color. The name of the property is color.
    • You have an extra < before <style.
    • You shouldn’t put your DTD in a comment; that defeats the point.
    • There’s a missing semicolon after text-align: center.
    • You probably don’t want to specify :link; that will only apply to links that are neither visited, hovered nor active.

    Here’s a demo with all the fixes on JSBin, because jsFiddle is down.

    • 0