Nav Link Colors (Problem)

[Catasphere]

My second ever post on this forum!

Anyway, I have this:

body, html {

position: relative;

z-index: -100;

font-family: Helvetica Neue, Arial, Sans-Serif;

font-size: 13px;

color: #000;

}



html {

background-color: #00263B;

background-image:

-moz-radial-gradient(top center, circle, white 1%, white 1%, transparent 2%),

-moz-radial-gradient(bottom center, circle, yellow 5%, transparent 12%),

-moz-linear-gradient(top, #041b1e, #00496d);

min-height: 2000px;

}



a:link {

color: black;

text-decoration: none;

}



a:visited {

color: black;

text-decoration: none;

}



body {

margin: 100px;

}



h1 {

text-shadow: -5px 5px 10px #666666;

text-align: center;

margin: 0 auto;

}



.roving {

color: #1A82F7;

}



h2 {

margin: 0 auto;

}



#wrap {

position: relative;

z-index: -99;

border-radius: 15px 15px 15px 15px;

width: 750px;

margin: 0 auto;

box-shadow: 0 0 5px 1px #2B2922;

-webkit-box-shadow: 0 0 5px 1px #2B2922;

background-color: rgb(43,43,43);

}



header {

color: rgb(230,225,220);

padding: 5px 10px;

}



#nav {

min-height: 25px;

margin: -25px 5px;

padding: 5px 10px;

}



.navlinksleft, .navlinksright { margin: 5px; }



.navlinksleft { float: left; }



.navlinksright { float: right; }



#nav ul {

font: 24px Helvetica;

margin: 0;

padding: 0;

list-style: none;

}



.navlinksleft a:link {

color: yellow !important;

}



#nav a {

position: relative;

-moz-transition: elevation .4s;

}



#nav a:hover {

elevation: -90deg below;

text-shadow: 1px 1px 5px black;

}



#nav li {

display: inline;

margin: 0;

padding: 0;

}



#main {

position: relative;

z-index: -2;

float: left;

width: 465px;

margin: 5px;

padding: 10px;

border: 1px dashed black;

box-shadow: 0 0 5px 1px #000000;

-webkit-box-shadow: 0 0 5px 1px #000000;

background: rgb(230,225,220);

}



#sidebar {

position: relative;

z-index: -1;

float: right;

margin: 5px;

border: 1px dashed black;

width: 220px;

padding: 10px;

background: rgb(230,225,220);

box-shadow: 0 0 5px #000000;

-webkit-box-shadow: 0 0 5px 1px #000000;

}



.sidelinks a { font: 20px helvetica; -moz-transition: padding .4s; }

.sidelinks a:hover { padding-left:  6px; text-shadow: 1px 1px 5px black; }



#footerbox {

position: relative;

z-index: -3;

float: left;

width: 695px;

background: rgb(230,225,220);

margin: 5px;

margin-left: 15px;

margin-bottom: 10px;

padding: 10px;

-moz-border-radius: 15px;

-moz-box-shadow:inset 1px 1px 5px #000000;

}





footer {

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

border: 1px dashed black;

padding: 5px 10px;

background: rgb(230,225,220);

clear: both;

}



footer p { text-align: center; margin: 0; }

And I’m wondering why the left side of the nav links flash the color yellow, but then revert to black. I’m just getting used to this CSS thing so if these are poor ways to do this, sorry :p My coding is pretty bad.

[ChrisBull]

Im guessing its because your a:visited is black, but with all that code and not much of an explanation or live example i cant be of much help

[Catasphere]

@ChrisBull: That was the ticket, I can’t believe I didn’t catch that. Thanks!

[Author]

Posts