Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Firefox a:link styling issue

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

972 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