Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 321
  • Last Modified:

Firefox a:link styling issue

I'm having trouble getting Firefox to style my links appropriately. It only picks up the style that is last in the document. This is so frustrating and I can't think of any way this css is wrong. I've validated it, rewritten it, blah blah blah, but no dice. This is such a simple thing too.

So, in Firefox, all of my links are white, but in other browsers, the styling is just fine, showing up in white brown and black.

ul {
margin-left : 30px;
}
h1 {
font-size : 14px;
font-weight : bold;
}
h2 {
font-size : 17px;
line-height : 1.5em;
font-weight : bold;
}
.sidenav2 {
width : 400px;
height : 100px;
position : absolute;
margin-left : 645px;
margin-top : 62px;
z-index : 10;
}
.sidenav2 a:link, a:visited, a:hover, a:active {
color : white;
}
.blue2 {
width : 100%;
height : 434px;
margin-top : 231px;
background-color : #4de6f3;
position : absolute;
}
.blue3 {
width : 100%;
height : 1220px;
margin-top : 231px;
background-color : #4de6f3;
position : absolute;
z-index : -1;
}
.blue4 {
width : 100%;
height : 965px;
margin-top : 231px;
background-color : #4de6f3;
position : absolute;
z-index : -1;
}
#simplegallery1 {
margin-top : 50px;
margin-left : 160px;
position : absolute;
z-index : 2;
}
#simplegallery1 .gallerydesctext {
text-align : left;
padding : 2px 5px;
}
.galdec {
width : 730.5px;
height : 384px;
z-index : 1;
margin-top : -350px;
margin-left : 130px;
position : absolute;
}
.testitext {
z-index : 21;
background-color : #4de6f3;
width : 607px;
margin-left : 180px;
position : absolute;
margin-top : 30px;
}
.testitext2 {
z-index : 21;
background-color : #4de6f3;
width : 607px;
margin-left : 180px;
position : absolute;
margin-top : 40px;
}
p {
z-index : 20;
}
.textdec {
position : absolute;
z-index : 0;
margin-left : 130px;
}
.white4 {
height : 147px;
width : 100%;
z-index : -1;
margin-top : 1390px;
position : absolute;
background-color : white;
text-align : center;
font-size : 12px;
padding : 8px;
}
.abouttext3 {
color : white;
position : absolute;
width : 300px;
margin-top : 990px;
margin-left : 600px;
}
.events3 {
width : 490px;
position : absolute;
margin-top : 990px;
z-index : 2;
color : white;
margin-left : 100px;
}
.foot3 {
position : absolute;
margin-top : 1285px;
z-index : 2;
}
.white4 {
height : 147px;
width : 100%;
z-index : -1;
margin-top : 1230px;
position : absolute;
background-color : white;
text-align : center;
font-size : 12px;
padding : 8px;
}
.white5 {
height : 147px;
width : 100%;
z-index : -1;
margin-top : 1490px;
position : absolute;
background-color : white;
text-align : center;
font-size : 12px;
padding : 8px;
}
ul, ol, dl {
padding : 0;
margin : 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top : 0;
padding-right : 15px;
padding-left : 15px;
}
a img {
border : none;
}
a:link {
text-decoration : none;
}
a:visited {
text-decoration : none;
}
a:hover, a:active, a:focus {
text-decoration : none;
}
.container {
width : 960px;
margin : 0 auto;
z-index : 3;
background-color : #4de6f3;
}
.nav {
width : 960px;
height : 54px;
background-color : #834e35;
color : white;
margin : 0;
padding : 0;
}
.white {
width : 100%;
height : 177px;
background-color : white;
position : absolute;
z-index : 1;
}
.mainpgblue {
width : 270.5px;
height : 324px;
margin-left : 80px;
margin-top : 60px;
position : absolute;
}
.mainpgblue2 {
width : 258px;
height : 324px;
margin-left : 350.5px;
margin-top : 60px;
position : absolute;
}
.mainpgblue3 {
width : 271px;
height : 324px;
margin-left : 608.5px;
margin-top : 60px;
position : absolute;
}
body {
margin : 0;
padding : 0;
background-color : #834e35;
font-family : Georgia, serif;
}
.foot {
position : absolute;
margin-top : 770px;
z-index : 2;
}
.foot2 {
position : absolute;
margin-top : 1530px;
z-index : 2;
}
.events {
width : 490px;
position : absolute;
margin-top : 460px;
z-index : 2;
color : white;
margin-left : 100px;
}
.events2 {
width : 490px;
position : absolute;
margin-top : 1250px;
z-index : 2;
color : white;
margin-left : 100px;
}
.testi {
font-size : 24px;
margin-top : 20px;
position : absolute;
z-index : 2;
width : 750px;
margin-left : 200px;
color : #9e7460;
}
.abouttext {
color : white;
position : absolute;
width : 300px;
margin-top : 440px;
margin-left : 600px;
}
.abouttext2 {
color : white;
position : absolute;
width : 300px;
margin-top : 1250px;
margin-left : 600px;
}
.white2 {
height : 147px;
width : 100%;
z-index : 1;
margin-top : 700px;
position : absolute;
background-color : white;
text-align : center;
font-size : 12px;
padding : 8px;
}
.testi a:link, a:visited, a:hover, a:active, a:focus {
color : #834e35;
}
.nav a:link, a:visited, a:hover, a:active, a:focus {
color : #fff;
}
.blue {
width : 100%;
height : 404px;
margin-top : 233px;
background-color : #4de6f3;
position : absolute;
}
.white3 {
height : 147px;
width : 100%;
z-index : -1;
margin-top : 350px;
position : absolute;
background-color : white;
text-align : center;
font-size : 12px;
padding : 8px;
}
.testitext2 a:link {
color : black;
}
0
jgosney
Asked:
jgosney
1 Solution
 
David S.Commented:
".sidenav2 a:link, a:visited, a:hover, a:active" means "a:link" elements that are a descendant of an element with the class "sidenav2" and all <a> elements that are visited, hovered or active (being clicked on) regardless of where they are in the document. What you really mean is this: ".sidenav2 a:link, .sidenav2 a:visited, .sidenav2 a:hover, .sidenav2 a:active".

I expect why it appears to work in other browsers is that the links are not visited in them like they are in Firefox.
0
 
jgosneyAuthor Commented:
Thanks! You're awesome.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now