3 replies [Last post]
Yakhunter
Offline
Regular
Last seen: 16 years 33 weeks ago
Joined: 2006-02-12
Posts: 11
Points: 0

I have links with the common rollovers: a a:hover a:active a: visited.
I can get them to display properly in all browsers, and as of yet do not have them linked to anything. I just use the dummy <a href="#"
Anyway when I click on the link it should change to active, and the background tab should be light grey. This works perfectly in IE. However in Mozilla, Netscape, and Opera the rollover, and initial states work, but when I click the link it doesn't stay active like it should.

Here is my code:
html:
<ul>
<li><a href="personal.php" title="Friends">Friends</a></li>
<li><a href="#" title="Eents">Events</a></li>
<li><a href="#" title="Music">Music</a></li>
<li><a href="#" title="RSVP's">RSVP's</a></li>
<li><a href="#" title="Bulletin">Bulletin</a></li>
<li><a href="#" title="Mail">Mail</a></li>
<!--end tabs-->
</ul>

css:
ul {
background: #FFFFFF;
width: 490px;
clear: both;
margin: 0 0 0 0;
padding: 5px 0 0 0;
list-style-type: none;
}

li {
background: #FFFFFF url(images/tab_grey.gif) top center no-repeat;
display: inline;
width: 83px;
height: 22px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

li a {
background: #FFFFFF url(images/tab_grey.gif) top center no-repeat;
float: left;
width: 83px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 0;
margin: 0;
}

li a:visited {
background: #FFFFFF url(images/tab_grey.gif) top center no-repeat;
width: 83px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
}

li a:hover {
background: #FFFFFF url(images/tab.gif) top center no-repeat;
height: 22px;
width: 83px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
}

li a:active {
background: #FFFFFF url(images/tab.gif) top center no-repeat;
height: 22px;
width: 83px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0 0 0 0;
margin: 0;
}

Here is the site: http://www.gofama.com/fama/personal.php#

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 32 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: active link not displaying properly

Yakhunter wrote:
However in Mozilla, Netscape, and Opera the rollover, and initial states work, but when I click the link it doesn't stay active like it should.

I rather seem to remember that the CSS standard calls for a link to be "active" only when it is clicked on. If that's right then it's IE that is doing things wrong, not the compliant browsers.

Actually I believe it's a fairly safe bet that in any situation where IE does things one way and all the other browsers do it a different way, it is IE, not the others, that is wrong.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

rguy84
Offline
Enthusiast
Seattle, Wa
Last seen: 15 years 48 weeks ago
Seattle, Wa
Timezone: GMT-7
Joined: 2004-07-18
Posts: 60
Points: 0

active link not displaying properly

Yak Click on a tab and hold your mouse button down. It will go grey, hence active state...

Ryan
my blog

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

active link not displaying properly

Active is meant to be active for the duration of the action being carried out.

Yakhunter I notice that you do not have a DTD on your page and are thus working in quirks mode, this forum takes a standards based approach to coding where CSS is concerned; to reliably offer help on CSS problems we have to expect that pages render in standards mode using complete DTD's otherwise results and rules are un-predictable.

When you receive replys to questions you post please have the courtesy to respond to them however briefly, this is necessary forum etiquette.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me