Solved

Firefox a:link styling issue

Posted on 2011-03-15
2
312 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 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

785 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