CSS block link - how to get it work properly?


Tags: html,css

Problem :

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?



Solution :

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


    CSS Howto..

    How to correctly display HTML page in browser and mobile

    How to get an input set to display block to fade in with css

    How can I use AngularJS directive to apply css style for a string?

    How to create a vertical carousel using plain JavaScript and CSS

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    I can't make the a Background image display & and can't figure out how to fit text into the image

    How to change a class CSS with a Greasemonkey script?

    how to create a pricetag like border around list items

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to link index.html to css file for github page

    CSS hover - parents are affected, too. How to avoid this?

    How to let Materialize use classes for dropdowns and not ID's?

    How to align text under image using HTML/CSS?

    How can I determine the escape sequence for characters in an icon font?

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    How to style differently only the first list item from unsorted list

    How to align a picture,name and the post with css like facebook does?

    CSS - How to only apply a style to a div that is inside another div?

    How do I correct this CSS fluid layout glitch?

    How to swap two button elements using float in CSS

    How to remove an empty line between two navbars

    How to slide/grow a tile to position with 90x90px with CSS

    How to include a static page with custom css and js files in a Rails application

    CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

    How to correctly override default JavaFX 8 CSS on TableView

    How to make navigation bar of pure css slider?

    How to detect CSS translate3d without the webkit context?

    How to set a different main content background for each page in weebly?

    How do I style JUST the reflection of the content without affecting its original source?

    website div won't stretch from left to right, how do you fix css?