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

    Using javascript to show html on every page except one page

    How to Find CSS Selector

    How to have a DIV appear after you hover over an image/link/another div?

    How to match all col height to row height in Bootstrap 3?

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    How would I go about setting a CSS gradient background in JavaScript?

    How to prevent outside CSS from overriding web component styles

    How to include css files in JSP page struts2?

    How to create the + button with CSS?

    How to make button look like a link?

    How to force Google's custom search to be responsive?

    How do i make part of a CSS background fit perfectly to a browser

    How can I style flexbox children in a multiline

    Showing the child category when Clicking the parent category

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How to style a tag for current div with css?

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to assign a css class to echo $output

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How to convert a HTML/CSS template to haml/sass template? [closed]

    How to resize two divs on the click of a link

    How to align things responsive html CSS

    How to dynamically insert css vendor prefixes using jquery

    How to set two elements on the same line using CSS

    How to use a custom Style Sheet in WordPress

    How to center div the whole screen page using css

    How to change the current link color in navigation bar

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?