?
Solved

Firefox a:link styling issue

Posted on 2011-03-15
2
Medium Priority
?
319 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 43

Accepted Solution

by:
David S. earned 500 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

718 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