4 replies [Last post]
fkbert
fkbert's picture
Offline
newbie
Last seen: 6 years 1 week ago
Timezone: GMT+2
Joined: 2014-07-02
Posts: 3
Points: 4

Hello,

I am trying to learn to add effects to links, but my browsers (Firefox, Explorer and Dragon) do not show some of these effects.

In particular a:hover does not change font-family and does no change style in italic;
a:active does not show the background-color I chose, in effect does not change anything.

You can find html and css codes at the following link:
http://jsfiddle.net/kcnyg/YJ5F9/

As you can see, even in http://jsfiddle.net a:active does not work, whilst a:hover change the link in italic. In my browser a:hover works only for color.

I would post the entire html and css codes if it can be useful but I do not know how to do it. User usually are able to comment their post and then attach teir html code and then their css code like in the following thread, in separate sectors:

http://csscreator.com/topic/aactive-not-working-navigation

That would be very handy... That might depend maybe that I do not see the editor toolbar Sad

Many thanks in advance

fkbert
fkbert's picture
Offline
newbie
Last seen: 6 years 1 week ago
Timezone: GMT+2
Joined: 2014-07-02
Posts: 3
Points: 4

Re: a:hover and a:active not working

Here's my complete html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 
	<head>
	<title>  </title>
	<link rel="stylesheet" type="text/css" href="style.css" />
 
 
	</head>
 
	<body>
		<h1 id="Start"> My first stylesheet </h1>
		<br />
		<p> Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.
Ennius et sapines et fortis et alter Homerus, ut critici di*beep*, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. </P>
 
		<br />
		<br />
 
		<a href="#Start"><img src="uparrow.bmp" width="30px" heigth="30px" title="Go to start" /></a>
		<a href="#Start"><p style="text-align:center"> Torna su </p></a>
 
		<br />
		<br />
 
		<a href="Google.com"><p style="text-align:center"> Go to Google </p></a>
 
	</body>
</html>

The following is my ssl code:

body {background: white}
 
h1 {color: #000000;
   background-color: #FF9900;
   font: normal normal bold 2em Damion, courier new, serif;
   text-decoration: underline;}
 
p {font: normal normal normal 14px courier new, serif;
   text-indent: 30px;
   text-align:justify;
   text-transform: none;
   letter-spacing:1px}
 
a:link {color: #6699CC;}
a:visited {color: #660099;}
a:hover {color: #330000;
	 font-style: italic;
         font-family: Yellowtail;}
a:active {background-color: #FF3300;}

To resume, a:active does not work whilst a:hover works only for color.

Many thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Selectors

Your structure, invalid btw, is not selected. If you want to change the text font stuff, remember it belongs to the p element, not a.

To make your invalid markup respond, make your selector, e.g.

a:hover p {
  font-style: italic;
  }

Better, fix your errors.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fkbert
fkbert's picture
Offline
newbie
Last seen: 6 years 1 week ago
Timezone: GMT+2
Joined: 2014-07-02
Posts: 3
Points: 4

What is my invalid markup?

I am studying css at html.net
The tutorial is very interesting and the part on links is at:

http://html.net/tutorials/css/lesson6.php

It looks as if any pseudo class affects every link, no matter if it is a paragraf or a headline. That is, as far as I understood, the code a:hover { should affect implicitly p if p is linked with a.

If you look at lesson 6, in fact, this happens for any pseudo class.

I would appreciate if you could reveal, if you feel like, were my structure is invalid and what you mean when you say that it is not selected. I will not get offended, I am learning. ie, what is my 'invalid markup' and why it is invalid?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

You're using xhtml 1.0, which

You're using xhtml 1.0, which doesn't allow the a element to contain a block level element. Thus, <a href=""><p>xxx</p></a> is invalid. The same with html 4.01. HTML5 allows that structure, but is not the current recommendation.

You're right that your snippet (maybe) ought to work, but the pseudo classes are dynamic and some UAs may not support style changes for descendants as the pseudo class changes. I'm on a Linux machine w/o IE, but Chrome, Opera and Firefox work for inherited styles, but not for non-inherited properties like background-color.

If you're going to use the structure of the original post, do use the style selector I gave as an example.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.