4 replies [Last post]
autumnwillow
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2008-01-04
Posts: 3
Points: 0

The site is valid and checked through w3c.
http://www.idiotbox.ws/beta/index.html

html code:

Forest Treasure Online

CSS code

@charset "utf-8";
body {
background-color: #cccc99;
margin: 0;
text-align: center;
background-image: url(images/header.gif);
background-repeat: repeat-x;
}

#global_header {
width: 800px;
margin: 170px auto;
}
#global_header ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}
#global_header .ulclasshack {
float: left;
}
#global_header li {
position: relative;
}
#global_header ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
#global_header ul ul {
position: absolute;
z-index: 500;
}
div#global_header ul ul {
display: none;
}
div#global_header ul li:hover ul {
display: block;
}
div#global_header ul ul,
div#global_header ul li:hover ul ul,
div#global_header ul ul li:hover ul ul {
display: none;
}

div#global_header ul li:hover ul,
div#global_header ul ul li:hover ul,
div#global_header ul ul ul li:hover ul {
display: block;
}
#global_header a {
text-decoration: none;
display: block;
font-family: "Courier New", Courier, monospace;
text-transform: uppercase;
font-size: 0.9em;
font-weight: 500;
letter-spacing: 1px;
margin: 0;
padding: 2px 40px 2px 40px;
}
#global_header a:link {
color: #FFFFFF;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #666600;
}
#global_header a:visited {
color: #FFFFFF;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #666600;
}
#global_header a:active {
color: #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #000000;
}
#global_header a:hover {
color: #FFFFFF;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #666600;
}

Astigma
Astigma's picture
Offline
Regular
Ohio
Last seen: 13 years 7 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-05-03
Posts: 24
Points: 1

This is actually "working as

This is actually "working as intended", assuming you wanted the active state to be solid black. a:active means when the link is activated... not the active page. It is actually hard to get this to work at all, and it will never do what you want it to do.
If you click and drag one of the buttons and release it somewhere, you will notice that the button stays black. If you just click on the link the page will refresh, killing all activated links. That said, active states are kind of useless in practical application.

If you are trying to get the active page, you have to make an "active" class and apply it to the page you want to have an active link on.

There is no problem which cannot be solved by a suitable application of high explosives.

autumnwillow
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2008-01-04
Posts: 3
Points: 0

Right, but i don't think you

Right, but i don't think you get my point. a:active works when you click and release the mouse button on the link. And it does not work.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That's because it's being

That's because it's being overridden by the :hover pseudo class. To see what I mean, don't use the mouse. Tab to the link, then use the [enter] key to activate.

Set the pseudo classes in this order:
:link
:visited
:focus
:hover
:active

With selectors of even weight, the last one rules.

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.

autumnwillow
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2008-01-04
Posts: 3
Points: 0

thank you kk5st. that worked.

thank you kk5st. that worked.