I've been trying to work out a solution to this problem for a while. I'm trying to keep my link styles different from each other. However one is interfering with the other and I'm searched for hours for a solution and as far as I can see, I've done everything correct and even run the CSS through a validater and it's been marked clean.



I wanted one Nav bar above my banner with plain text which doesn't change it's style over hover, visited, active, ect... and another Nav bar which changes over hover. However my last link in the second bar appears on hover over my 1st nav bar.

body,td,th {
    font-size:16px;
    font:Verdana, Arial, Helvetica, sans-serif;
    }

body {
    background-color:#292929;
    }
    
#container {
    width: 852px;
    height:auto;
    color:#000000;
    margin-left:auto;
    margin-right:auto;
    }
    
#banner {
    background-image:url(images/Banner.jpg);
    width:852px;
    height:200px;
    clear:both;
    }
    
#topnav{
    background-color:#000000;
    width:852px;
    height:20px;
    text-align:left;
    }
    
#topnav a:link, #topnav a:link, #topnav a:visited, #topnav a:active, #topnav a:hover, #topnav a:link:active, #topnav a:visited:active {
    margin-left:10px;
    margin-right:10px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bolder;
    font-size:20px;
    }
    
#nav {
    background-color:#000000;
    width:260px;
    height:825px;
    float:left;
    text-align:center;
    }
    
#nav a:link, #nav a:visited, #nav a:active, #nav a:hover, #nav a:visited:hover, #nav a:link:active, #nav a:visited:active {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    }
    
#content {
    background-color:#000000;
    width:592px;
    height:825px;
    float:right;
    overflow:scroll;
    overflow-x:hidden;
    }
    
#foot {
    background-image:url(images/Footer.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
#header {
    background-image:url(images/header.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
p{
    color:#FFFFFF;
    text-indent:5px;
    margin:2px;
    margin-top:12px;
    margin-bottom:12px;
    }
    
a#exkaiser:link {
    background-image:url(images/braveexkaiser.jpg);
    }

a#exkaiser:visited {
    background-image:url(images/braveexkaiser.jpg);
    }

a#exkaiser:hover, a:visited:hover {
     background-image:url(images/braveexkaiserrhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/braveexkaiser.jpg);
    }
    
a#Fighbird:link {
    background-image:url(images/bravesunfighbird.jpg);
    }

a#Fighbird:visited {
    background-image:url(images/bravesunfighbird.jpg);
    }

a#Fighbird:hover, a:visited:hover {
     background-image:url(images/bravesunfighbirdhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravesunfighbird.jpg);
    }
    
a#Da-Garn:link {
    background-image:url(images/bravefighterlegendDa-Garn.jpg);
    }

a#Da-Garn:visited {
    background-image:url(images/bravefighterlegendDa-Garn.jpg);
    }

a#Da-Garn:hover, a:visited:hover {
     background-image:url(images/bravefighterDa-Garnhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravefighterlegendDa-Garn.jpg);
    }
    
a#mightgaine:link {
    background-image:url(images/braveexpressmightgaine.jpg);
    }

a#mightgaine:visited {
    background-image:url(images/braveexpressmightgaine.jpg);
    }

a#mightgaine:hover, a:visited:hover {
     background-image:url(images/braveexpressmightgainehover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/braveexpressmightgaine.jpg);
    }
    
a#Jdecker:link {
    background-image:url(images/bravepolicejdecker.jpg);
    }

a#Jdecker:visited {
    background-image:url(images/bravepolicejdecker.jpg);
    }

a#Jdecker:hover, a:visited:hover {
     background-image:url(images/bravepolicejdeckerhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravepolicejdecker.jpg);
    }
    
a#Goldran:link {
    background-image:url(images/braveofgoldgoldran.jpg);
    }

a#Goldran:visited {
    background-image:url(images/braveofgoldgoldran.jpg);
    }

a#Goldran:hover, a:visited:hover {
     background-image:url(images/braveofgoldgoldranhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/braveofgoldgoldran.jpg);
    }
    
a#Dagwon:link {
    background-image:url(images/bravecommanddagwon.jpg);
    }

a#Dagwon:visited {
    background-image:url(images/bravecommanddagwon.jpg);
    }

a#Dagwon:hover, a:visited:hover {
     background-image:url(images/bravecommanddagwonhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravecommanddagwon.jpg);
    }
    
a#GaoGaiGar:link {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:visited {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:hover, a:visited:hover {
     background-image:url(images/GaoGaiGarhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Robots are a man's passion!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="mystylesheet.css" rel="stylesheet" type="text/css"></link>

</head>
<body>

    <div id="container">

        <div id="header"></div>

        <div id="topnav">
        
                <a href="index.htm" alt="home">HOME</a><a href="#" alt="forums">FORUMS</a><a href="#" alt="FAQ">FAQ</a>
                
        </div>        
        
        <div id="banner"></div>        
        
        <div id="nav">
                
                <a id="exkaiser" href="#" alt="Brave Exkaiser"></a>
                <a id="Fighbird" href="#" alt="The Brave Fighter of the Sun Fighbird"></a>
                <a id="Da-Garn" href="#" alt="The Brave Fighter of Legend Da-Garn"></a>
                <a id="mightgaine" href="#" alt="The Brave Express  Might Gaine"></a>
                <a id="Jdecker" href="#" alt="Brave Police J-Decker"></a>
                <a id="Goldran" href="#" alt="The Brave of Gold Goldran"></a>
                <a id="Dagwon" href="#" alt="Brave Command Dagwon"></a>
                <a id="GaoGaiGar" href="#" alt="The King of Braves GaoGaiGar"></a>
                        
        </div>
        
            <div id="content">
            
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                
                
            </div>
        
            <div id="foot"></div>

    </div>

</body>
</html>

It seems that this section of code:

#topnav{
    background-color:#000000;
    width:852px;
    height:20px;
    text-align:left;
    }
    
#topnav a:link, #topnav a:link, #topnav a:visited, #topnav a:active, #topnav a:hover, #topnav a:link:active, #topnav a:visited:active {
    margin-left:10px;
    margin-right:10px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bolder;
    font-size:20px;
    }

Is affected by this piece:

a#GaoGaiGar:link {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:visited {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:hover, a:visited:hover {
     background-image:url(images/GaoGaiGarhover.jpg);
    }

a:link:active, a:visited:active {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

A link would be better than a screenshot we can see what is happening then

although here

a#GaoGaiGar:hover, a:visited:hover {
     background-image:url(images/GaoGaiGarhover.jpg);
    }

the CSS tells links with an ID of "GaoGaiGar" AND standard links for :visited and :hover to be the same

so will be overruling earlier (in the CSS order) definitions for links.

Originally Posted by chrishirst

A link would be better than a screenshot we can see what is happening then

although here

a#GaoGaiGar:hover, a:visited:hover {
     background-image:url(images/GaoGaiGarhover.jpg);
    }

the CSS tells links with an ID of "GaoGaiGar" AND standard links for :visited and :hover to be the same

so will be overruling earlier (in the CSS order) definitions for links.

So as far as I understand it should be like this:

a#GaoGaiGar:link {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:visited {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#GaoGaiGar:hover, a#GaoGaiGar:visited:hover {
     background-image:url(images/GaoGaiGarhover.jpg);
    }

a#GaoGaiGar:link:active, a#GaoGaiGar:visited:active {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

Which doesn't solve the problem, but it does make sense to me as to why it should be set out like that. It also causes the same image to appear when I click the link.

With the way you have the pseudo classes set out and by setting two pseudo classes in one statement (:link:active etc ) you are causing problems with the normal cascade of rules, properties and values.

the anchor pseudo classes MUST be defined in the correct order otherwise they will overrule each other.

the correct order is

:Link
:Visited
:Hover
:Active

LoVeHAte is the mnemonic

A link to the page(s) would be of more use for us to debug (for those of us who use the FireFox developer toolbar) as then we can see what rules apply to each element in the various class states

Originally Posted by chrishirst

With the way you have the pseudo classes set out and by setting two pseudo classes in one statement (:link:active etc ) you are causing problems with the normal cascade of rules, properties and values.

the anchor pseudo classes MUST be defined in the correct order otherwise they will overrule each other.

the correct order is

:Link
:Visited
:Hover
:Active

LoVeHAte is the mnemonic

A link to the page(s) would be of more use for us to debug (for those of us who use the FireFox developer toolbar) as then we can see what rules apply to each element in the various class states

I read up on it before I posted here and apparently I couldn't set it up like that if I wanted what I have for my hover links. What's a decent free web host to store a site temporarily?

I have used http://www.1asphost.com/ once upon a time

I'm very sorry, but i've had family problems for the a fair while now and I've only just managed to have it almost sorted out. Anyway, I've slightly updated the site and now have it hosted on tripod. It's unbelievably frustrating that some free hosts didn't bother to send me an e-mail for my account and that I couldn't get in contact with them. So here is the site: http://ultimategattai.tripod.com/

As you can see the links aren't behaving as I intended and I want to use pure css if possible. I want to avoid javascript if I can. I want the left nav area to use a rollover effect when the mouse hovers over the button and the unhovered version to appear in any other situation. The top text links should not change at all, even on hover or when it's visited. Hover images from my left nav appear on hover over the links and sometimes on clicking the link.

***UPDATE***

Ok, I've fixed the link style problems and they no longer interfere with each other as I have used the following site's ideas: http://www.findmotive.com/2006/10/31...mage-rollover/, http://www.wellstyled.com/css-nopreload-rollovers.html and http://www.edginet.org/techie/website/cssimg.html#. On the downside my links now disappear after I have clicked them (all links disappear). It's really annoying as I don't know what caused it or how to fix it?

The style sheet now looks like this:

body,td,th {
    text-align: center;
    font-size:17px;
    font:Verdana, Arial, Helvetica, sans-serif;
    }

body {
    background-image:url(images/bgpattern.jpg);
    }
    
#container {
    width: 852px;
    height:auto;
    color:#000000;
    margin-left:auto;
    margin-right:auto;
    }
    
#banner {
    background-image:url(images/Banner.jpg);
    width:852px;
    height:220px;
    clear:both;
    }
    
#topnav{
    background-color:#000000;
    width:852px;
    height:22px;
    text-align:left;
    }
    
#topnav a:link, #topnav a:link, #topnav a:visited, #topnav a:hover, #topnav a:active, #topnav a:link:active, #topnav a:visited:active {
    margin-left:10px;
    margin-right:10px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bolder;
    font-size:20px;
    }
    
#nav {
    background-color:#000000;
    width:260px;
    height:870px;
    float:left;
    text-align:center;
    }
    
#nav a:link, #nav a:visited {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:top;
    }
    
#nav a:hover, #nav a:visited:hover, #nav a:link:active, #nav a:visited:active, #nav a:active {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:bottom;
    }    
    
#content {
    background-color:#000000;
    width:592px;
    height:870px;
    float:right;
    text-align:left;
    overflow:scroll;
    overflow-x:hidden;
    }
    
#foot {
    background-image:url(images/Footer.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
#header {
    background-image:url(images/header.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
p.seriesbyline {
    color:#FFFF33;
    font-size:20px;
    font-style:italic;
    text-align:center;
    margin:6px;
    margin-top:4px;
    margin-bottom:4px;
    }
    
p {
    color:#FFFFFF;
    text-indent:12px;
    margin:6px;
    margin-top:26px;
    margin-bottom:26px;
    }
    
a#exkaiser:link {
    background-image:url(images/braveexkaiser.jpg);
    }
    
a#Fighbird:link {
    background-image:url(images/bravesunfighbird.jpg);
    }

a#Da-Garn:link {
    background-image:url(images/bravefighterlegendDa-Garn.jpg);
    }

a#mightgaine:link {
    background-image:url(images/braveexpressmightgaine.jpg);
    }

a#Jdecker:link {
    background-image:url(images/bravepolicejdecker.jpg);
    }

a#Goldran:link {
    background-image:url(images/braveofgoldgoldran.jpg);
    }

a#Dagwon:link {
    background-image:url(images/bravecommanddagwon.jpg);
    }

a#GaoGaiGar:link {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#gurrenlagann:link {
    background-image:url(images/TTGL.jpg);
    }

a#Gunbuster:link {
    background-image:url(images/aimforthetopgunbuster.jpg);
    }
    
a#msn:link {
    background-image:url(images/MSN.jpg);
    }

a#macross:link {
    background-image:url(images/SDFM.jpg);
    }


a#srw:link {
    background-image:url(images/SRW.jpg);
    }

a#fmp:link {
    background-image:url(images/FMP.jpg);
    }
    
a#Gravion:link {
    background-image:url(images/gravion.jpg);
    }
    
a#MAD:link {
    background-image:url(images/MAD.jpg);
    }

*BUMP*

Same as stated above. I make the hover links by using one image which changes position on hover. However it does not show up in Internet explorer and the links also disappear in firefox when I click on them. The link is stated in the above post.

First, make sure your styles for links are defined it the right order:
Link, Visited, Hover, Active - think LoVeHAte. Yes, it makes a difference, as Chris pointed out before.

Second, have you got the page up somewhere ?

Originally Posted by LadynRed

First, make sure your styles for links are defined it the right order:
Link, Visited, Hover, Active - think LoVeHAte. Yes, it makes a difference, as Chris pointed out before.

Second, have you got the page up somewhere ?

I'm pretty sure I already changed it so that it is LoVeHAte since his last post, here's the link again, http://ultimategattai.tripod.com/.