PDA

View Full Version : Simple but frustrating: Link not getting styled



Fullminster Buc
Jun 9th, 2010, 03:28 PM
I am not getting my links styled and I don`t understand why. Here is an example of code not giving any result in my browsers, even after deleting cache. Any ideas?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style>
body{
a:link {text-decoration: none; color: red;};
a:hover {text-decoration: underline; color: white;}
}
</style>
</head>
<body>
<p><a href="http://www.test.com">test</a></p>
</body>
</html>

SB65
Jun 9th, 2010, 03:39 PM
You don't need to wrap all your css in the body tags. Try:



<style type="text/css" media="screen">
a:link {text-decoration: none; color: red;};
a:hover {text-decoration: underline; color: white;}
</style>

rakasv
Jun 9th, 2010, 05:35 PM
or


<style>
body p{
a:link {text-decoration: none; color: red;};
a:hover {text-decoration: underline; color: white;}
}
</style>


or



<style>
p{
a:link {text-decoration: none; color: red;};
a:hover {text-decoration: underline; color: white;}
}
</style>

Scriptet
Jun 9th, 2010, 08:33 PM
@rakasav you mean:


body p a:link{text-decoration: none; color: red;}
body p a:hover {text-decoration: underline; color: white;}

or



p a:link{text-decoration: none; color: red;}
p a:hover {text-decoration: underline; color: white;}

Pseudo-Classes like :link and :hover should come after the selector before the block not inside the block { }!!

rakasv
Jun 9th, 2010, 08:44 PM
both =) sorry i was a little distracted

Apostropartheid
Jun 9th, 2010, 09:18 PM
I am not getting my links styled and I don`t understand why. Here is an example of code not giving any result in my browsers, even after deleting cache. Any ideas?

Off topic, but I'm loving the name.

Fullminster Buc
Jun 9th, 2010, 11:15 PM
Thanks guys, case closed.
A:link {text-decoration: none; color: grey;}
A:visited {text-decoration: none; color: grey;}
A:active {text-decoration: none; color: grey;}
A:hover {text-decoration: underline; color: black;}

body{
font-size:90%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
} etc.

Fullminster Buc
Jun 9th, 2010, 11:15 PM
Offtopic: glad you like it Astro, you`ve been creative yourself.