Solved

Firefox a:link styling issue

Posted on 2011-03-15
2
314 Views
Last Modified: 2012-05-11
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
Comment
Question by:jgosney
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 125 total points
ID: 35141939
".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
 

Author Closing Comment

by:jgosney
ID: 35142442
Thanks! You're awesome.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question