FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Problems with pseudo-classes and links





tchaunt
For my website (tchaunt.frih.org), I am wanting to use different shades of red for all of the stated of a link. I am using the pseudo classes:
:link
:hover
:active
:visited

All the classes (attached to the anchor attribute--<a>) are working....except for a:link. I link to an external style sheet (titled web.css) on every page. I checked my code and saw that I had a:link (border: none;) on my page's, but that wasn't the problem. I removed it, and the links that haven't been visited are still showing up as blue.

The stylesheet I link to uses this code:
Code:
<style type="text/css">
a:link {color: #D31F1F; border: none;}
a:visited {color: #8A0404; border: none;}
a:hover {color: #F32D2D; border: none;}
a:active {color: #E46D6D; border: none;}
img {border: none;}
img:active {border: none;}
</style>


Here's the code from my homepage:
Code:
<html>
<head>
   <title>
      TCHaunt - Home
   </title>
<link href="/images/favicon.ico" rel="icon"/>
   <style>
body {background-color: black; background-image: url(/images/paper.png); background-position: center; background-repeat: repeat-y;}
#divcent {width: 480px; margin:auto;}
img {border: none;}
        </style>
<link rel = "stylesheet" type="text/css" href="/web.css" >
    </head>
    <body spellcheck="false">
        <div id="divcent"><center><a href="index.php"><img alt="" src="/images/home.png" /></a><a href="fundraiser.php"><img alt="" src="/images/fundraiser.png" /></a><a href="sponsors.php"><img alt="" src="/images/sponsors.png" /></a><br />
        <br />
</center><font color="#FBFBFB"><h6>Please use Firefox to view the website</h6></font><center>       
        <img src="/images/tchaunt.png" alt="" />         <br />
        <font size="small"><em>The seed of evil has been<br />
        planted in Taylor County!</em></font></center><p>
        <font>Welcome to TCHaunt, the home of Taylor County's upcoming haunted house! Many people love a good haunt around Halloween. Well, we're going to make you one you'll never forget. Right now, we are still planning the haunt.</font><p>
<font>We are starting to get into the business aspect of the haunted house. Please help us entertain you at the highest quality by answering this <a href="survey.php">survey</a>.</font>
<p>        <font>The site is still under construction. Please keep checking in to see what we've added!</font>
    <br/><br/><br/>
<?php $_GET['type'] = 0; include 'rantex.php'; ?><br/></div></body>
</html>

Does anyone see the problem in the code? If you do, please post. By the way, I'm going to clean up the website and take away the extra internal CSS and just add it to the external CSS sometime soon. (Probably today)

EDIT: I went ahead and "merged" the internal and external CSS style sheets. Sadly, it didn't change the link problem. Could the problem possibly be that :link only works with certain browsers?
Peterssidan
You could try to remove the
Code:
<style type="text/css">
and
Code:
</style>
from web.css. HTML tags doesn't belong in CSS files.
tchaunt
Oh. Okay. My bad. The person I originally learned from always did the <style> tags in the external stylesheet thing. Plus, the books I've got laying around my house have it too. I guess I kinda' got ripped out of my money there. :/

I removed the tags....and the links started working. The <style> tags were the only problem. Thank you very much Peterssidan!
Stubru Freak
Just in case you care, I think this is the problem:

CSS doesn't care about line breaks, so your code is equal to this:
Code:
<style type="text/css"> a:link {color: #D31F1F; border: none;}

It probably parses it something like:
<: ignored I guess
style: look for a style tag
type="text/css": not sure, but I guess it ignores it. Maybe it interprets it as a tag.
>: this means it will look for a direct child element of the style tag...
a:link: ...that is a link.

That matches nothing of course, so that's why you weren't getting any result.
In the future, you should try Console², a Firefox extension that allows you to see CSS errors like this one in the error console (with filtering and more).
tchaunt
Thanks for explaining that better. It makes a lot more sense. Also, thanks for the name of the Add-On. I'll check it out.
Related topics
Problems with links...
Advertise on my signature space!
uploading kompozer
[Beginner] Classes, Applying classes in CSS
Bluetooth
Programming links, info, and tutorials
Problems with my coding... again
CSS Problems + Cache control
Brain Or MIND?
bluetooth
Opera 9.0 Technology Preview 2
Windows Movie Maker problems.
CSS: Internet Explorer and pseudo-class
All About WoW
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.