homepage Welcome to WebmasterWorld Guest from 50.19.199.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Active link not underlined
The active link is not being underlined, when I am on that particular page
nigelt74




msg:4020001
 10:49 pm on Nov 5, 2009 (gmt 0)

Hi all

first I have validated my CSS on the w3C thingie and it tells me

This document validates as CSS level 2.1

My document type is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

By default my links are not underlined
What i want to happen is that when i hover over a link for an underline to appear (this works), and i want the current active link to be underlined, so for instance if I am on the about page the about link is underlined

Here is the relevant CSS


.smallhead {
font-size: 18px;
color: #fff;
}
.smallheadnav {
font-size: 18px;
text-align: right;
color: #fff;
text-decoration: none;
}
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
font-size: 18px;
position: relative;
text-align: center;
width: 100%;
}
a.smallheadnav:link { text-decoration: none; }
a.smallheadnav:visited { text-decoration: none; }
a.smallheadnav:hover { text-decoration: underline; }
a.smallheadnav:active { text-decoration: underline; }

And here is the section of HTML it should be acting on


<div class="line">
<span class="left">Hedgehog Fancier</span>
<span class="right">
<a class="smallheadnav" href="about.php">About</a>&nbsp;&nbsp;
<a class="smallheadnav" href="index.php">Portfolio</a>&nbsp;&nbsp;
<a class="smallheadnav" href="/blog">Blog</a>&nbsp;&nbsp;
<a class="smallheadnav" href="index.php">Bla</a>&nbsp;&nbsp;
<a class="smallheadnav" href="index.php">Bla</a>&nbsp;&nbsp;
</span>
</div>

currently only the Hover works, and i have no idea why the active doesn't, I am not good at CSS, but i can normally muddle through, but this which i believe should be simple has just stumped me completely.

Any help would be greatly appreciated

 

D_Blackwell




msg:4020022
 11:30 pm on Nov 5, 2009 (gmt 0)

and i have no idea why the active doesn't,

It works fine in FF and IE. The HTML and CSS is a bit muddled, so I had to give the links some color in order to see them at all in both browsers.? text-decoration: underline; is functional with a.smallheadnav:active { text-decoration: underline; }

Something else may be interfering causing it not to work.
................................

.smallheadnav {
font-size: 18px;
text-align: right;
color: #fff;
/*text-decoration: none;*/

This container will have no text-decoration: unless you are over-riding it from another container with higher specificity.
................................
You can get rid of all of the:
<a class="smallheadnav"

All of the <a> are contained within <div class="line">
Therefore:

.line a:link { text-decoration: none; }
.line a:visited { text-decoration: none; }
.line a:hover { text-decoration: underline; }
.line a:active { text-decoration: underline; }

This restricts the <a> declarations to ONLY render within .line

Now, each <a> already has its declarations defined and you can drop all of the class calls in the html

<a href="about.php">About</a>&nbsp;&nbsp;
................................

I don't care for the way the <span>s are used, but it's a choice. Not saying that it is wrong.

nigelt74




msg:4020040
 12:51 am on Nov 6, 2009 (gmt 0)

Even with the changes you suggested, the Active underlined doesn't seem to work, (The site background is black hence the white text)

How would i go about finding what is overriding it

I have tried removing all rules and I cannot get the active state to show,

Here is the entire CSS file, there is also a reset.css file, but when i removed the link to the reset it made zero difference to the links


body {
background: #000;
background-image:url('orange.gif');
background-repeat:repeat-x;
color: #fff;
font-size: 16px;
line-height: 22px;
padding: 0;
margin: 0 auto;
font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
}
#container
{
margin: 0px auto 50px auto;
width: 1000px;
padding: 0px;
}
#intro-header
{
height: 100px;
color: #fff;
}
#intro-text
{
Float: left;
left: 5px;
padding: 0px;
width: 460px;
}
#intro-slide
{
margin-left: 480px;
width: 510px;
padding: 0px;
margin-right: 5px;
}
em {
color: orange;
}
p {
color: #fff;
font-size: 16px;
line-height: 22px;
}
.largehead {
font-size: 44px;
line-height: 38px;
}
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
font-size: 18px;
position: relative;
text-align: center;
width: 100%;
color: #fff;
}
.grumpy-bunion, head-para {
padding: 5px 0px;
}
div.line a:link { text-decoration: none; color: #fff;}
div.line a:visited { text-decoration: none; color: #fff;}
div.line a:hover { text-decoration: underline; color: #fff;}
div.line a:active { text-decoration: underline; color: #fff;}

and here is a full page


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Good Afternoon - How are you</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flashdetect.js"></script>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="the.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="intro-header">
<p class="head-para">&nbsp;</p>
<div class="largehead">Good Afternoon</div><!-- large head -->
<div class="line">
<span class="left">How are you today</span>
<span class="right">
<a href="about.php">About</a>&nbsp;&nbsp;
<a href="index.php">Portfolio</a>&nbsp;&nbsp;
<a href="index2.php">Portfolio2</a>&nbsp;&nbsp;
</span>
</div>
<!-- line -->
</div><!-- intro header -->
<div style="clear:both;"></div>
<div id="intro-text">
<p><em>Welcome to the website . . </em></p>
<p>Bla Bla</p>
</div><!-- intro-text -->
<div id="intro-slide">
<p>&nbsp; </p>
<div id="flashcontent">
<h1>Oops!</h1>
<p>Slideshow would be here</p>
</div>
</div><!-- intro slide -->
</div><!-- container -->
</body>
</html>

While I realise this is overkill, I don't know how else to get the blasted thing to work

D_Blackwell




msg:4020047
 1:01 am on Nov 6, 2009 (gmt 0)

Not to worry. I'm taking a break to watch Survivor, and then I'll look at the new markup. Priority one is to replicate the problem. Priority two is to strip out as much as possible to restrict the problem. Then, the answer should be obvious (we hope).

(The site background is black hence the white text)

But you didn't give me that, so I had to hack in some color. When I did, the problem described was not there, so wasn't much that I could do except make suggestions to work the problem with.

8:00 - Gotta go.

nigelt74




msg:4020064
 1:26 am on Nov 6, 2009 (gmt 0)

Ok Ignore me I'm an idiot.

I think the whole problem is me misinterpreting what "active" means.

lets say that i had set
active to pink and
hover to blue
and visited and link to white

I assumed that "active" meant that when I clicked on the "about" page the about link would turn pink and stay pink for as long as I was on that page basically until I clicked on another link to go to another page. But thats wrong

So yes the code works as it should, when I click on a link it changes to the active state and as soon as I release the mouse button it returns to the default link state

D_Blackwell




msg:4020077
 1:43 am on Nov 6, 2009 (gmt 0)

Your provided markup does not replicate the described problem in FF, Opera, IE7 (didn't check 8).

The white links, 'About', 'Portfoliio', and 'Portfolio2' all show text-decoration: underline; on :hover, and maintain the underline onclick (:acitve). The underline is removed in the :visited state.

I can't fix what I can't see. There is another issue. With just the code provided for this sample, are you not seeing the underline with a:active ?
..........................

By the way -

Drop a:link and just use a - and you can drop the extra color declarations. Just an option to consider. rarely use :link myself.

div.line a { text-decoration: none; color: #fff; }
div.line a:visited { text-decoration: none;: }
div.line a:hover { text-decoration: underline; }
div.line a:active { text-decoration: underline;}
..........................

Commercials are half the bleeping show. Ha!

D_Blackwell




msg:4020083
 1:53 am on Nov 6, 2009 (gmt 0)

the about link would turn pink and stay pink for as long as I was on that page basically until I clicked on another link to go to another page. But thats wrong

Correct. It is still doable. You have choices to achieve that effect. One is to set the CSS style for that 'link', on that page, to be pink if you are on that page. Another option is to use PHP, which is a fancier way to do the same thing.

...............................

when I click on a link it changes to the active state and as soon as I release the mouse button it returns to the default link state

Exactly correct - with the understanding that if :visited were a different color, then the color would be different when you returned. I wouldn't bother with three links, but a page with a long list of links should have :visited style so that the user can easily keep track of where they have been.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved