firefox ignores my .css text link properties so links are in the wrong color

Report · Mar 28, 2018

This is the first site I've created with Dreamweaver CC. I find it much less user friendly than the old CS version, but I'm presuming that's because of the need for everything to be responsive these days. i'm having lots of problems but slowly getting there with the new site.
The current problem is Firefox displays some of my links in the wrong color. i'm using a Dreamweaver starter template to get myself going. I added some .css code to style the links. It works fine on one section of the page in most browsers but on another section the colors show incorrectly in firefox only. Could I have put the link-text styling rules in the wrong part of the Css file? I'm very hazy with css.

Report · Mar 28, 2018

If you have uploaded the site to a remote server, please supply the link to the site. Otherwise, give us an example of what is going wrong by supplying the full HTML code and the CSS that you have written.

Wappler, the only real Dreamweaver alternative.

Report · Mar 28, 2018

No, it only exists inside my own computer at this stage.
This is the css:

@charset "utf-8";

/* Global Styles */

a:link {

color: #00A981;

background-color: transparent;

text-decoration: underline;

font-weight: bold;

}

a:hover {

color: red ;

background-color: transparent ;

}

body {

margin-left: auto;

margin-right: auto;

width: 92%;

max-width: 960px;

padding-left: 2.275%;

padding-right: 2.275%;

background-color: #180177;

}

/* Header */

header {

text-align: center;

display: block;

}

header .profileLogo .logoPlaceholder {

background-color: rgba(24,1,119,1.00);

width: 260px;

text-align: center;

}

header .logoPlaceholder span {

width: 80px;

height: 22px;

font-family: 'Montserrat', sans-serif;

color: rgba(255,255,255,1.00);

font-size: 30px;

font-weight: 700;

line-height: 53px;

}

header .profilePhoto {

background-color: rgba(237,237,237,1.00);

width: 259px;

border-radius: 50%;

height: 259px;

clear: both;

}

header .profileHeader h1 {

font-family: 'Montserrat', sans-serif;

color: rgba(185,192,248,1.00);

font-size: 30px;

font-weight: 700;

line-height: 24px;

}

header .profileHeader h3 {

font-family: sans-serif;

color: rgba(185,192,248,1.00);

font-size: 16px;

font-weight: 700;

line-height: 24px;

}

hr {

background-color: rgba(118,1,247,1.00);

height: 3px;

border: thin none #7601F7;

-webkit-box-shadow: 0px 0px #7601F7;

box-shadow: 0px 0px #7601F7;

}

header .profileHeader p {

font-family: sans-serif;

color: rgba(185,192,248,1.00);

font-size: 14px;

font-weight: 400;

line-height: 1.8;

overflow-y: auto;

}

header .socialNetworkNavBar {

text-align: center;

display: block;

margin-top: 60px;

clear: both;

}

header .socialNetworkNavBar .socialNetworkNav {

border-radius: 50%;

cursor: pointer;

}

header .socialNetworkNavBar .socialNetworkNav img:hover {

opacity: 0.5;

}

/* Main Content sections */

.mainContent .section1 {

display: block;

}

.section1 .sectionTitle, .section2 .sectionTitle {

font-family: 'Montserrat', sans-serif;

color: rgba(185,192,248,1.00);

font-size: 18px;

font-weight: 700;

text-transform: uppercase;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

margin: 0 3% 0 0;

float: left;

clear: both;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

background-color: rgba(208,207,207,1.00);

height: 1px;

padding: 0px;

}

.mainContent .section1 .section1Content {

font-family: ProximaNova;

font-size: 14px;

font-weight: 100;

color: rgba(208,207,207,1.00);

}

.mainContent .section1 .section1Content span {

color: rgba(118,1,247,1.00);

font-family: sans-serif;

font-weight: bold;

}

.section2 .sectionContentTitle {

font-family: sans-serif;

color: rgba(185,192,248,1.00);

font-size: 18px;

font-weight: 700;

}

.section2 .sectionContentSubTitle {

font-family: sans-serif;

color: rgba(68,67,67,1.00);

font-size: 14px;

font-weight: 400;

}

.section2 .sectionContent {

font-family: sans-serif;

color: rgba(185,192,248,1.00);

font-size: 14px;

font-weight: 400;

line-height: 1.8;

}

.mainContent {

display: block;

}

.mainContent .externalResourcesNav .externalResources {

background-color: rgba(208,207,207,1.00);

display: inline-block;

text-align: center;

margin-top: 0px;

padding-top: 3%;

cursor: pointer;

}

.mainContent .externalResourcesNav .externalResources:hover {

background-color: rgba(153,153,153,1.00);

}

.externalResourcesNav .externalResources a {

font-family: 'Montserrat', sans-serif;

color: rgba(255,255,255,1.00);

font-size: 14px;

font-weight: 400;

line-height: 18px;

text-decoration: none;

}

.stretch {

content: '';

display: inline-block;

margin-left: 2%;

margin-right: 2%;

}

/* Footer */

footer .footerDisclaimer {

font-family: sans-serif;

font-size: 14px;

line-height: 18px;

color: rgba(104,103,103,1.00);

font-weight: 700;

}

footer .footerDisclaimer span {

color: rgba(181,178,178,1.00);

font-weight: 400;

}

footer .footerNote {

font-family: sans-serif;

font-size: 14px;

line-height: 18px;

color: rgba(104,103,103,1.00);

font-weight: 700;

}

footer .footerNote span {

color: rgba(181,178,178,1.00);

font-weight: 400;

}

/* Media query for Mobile devices*/

@media only screen and (min-width : 285px) and (max-width : 480px) {

/* Header */

header {

width: 100%;

float: none;

}

header .profileLogo .logoPlaceholder {

display: inline-block;

}

header .profilePhoto {

display: inline-block;

background-color: #180177;

}

header .profileHeader {

text-align: center;

margin-top: 10%;

}

header .profileHeader p {

text-align: justify;

}

header .socialNetworkNavBar {

text-align: center;

display: block;

margin-top: 60px;

clear: both;

margin-bottom: 15%;

}

header .socialNetworkNavBar .socialNetworkNav {

width: 60px;

height: 60px;

display: inline-block;

margin-right: 23px;

}

/* Main content sections */

.mainContent .section1 {

text-align: center;

margin-bottom: 10%;

}

.section1 .section1Title, .section2 .section1Title {

text-align: center;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

width: 100%;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

display: none;

}

.mainContent .section1 .section1Content {

display: inline-block;

text-align: left;

font-family: sans-serif;

text-align: justify;

}

.mainContent .section2 {

display: block;

text-align: center;

}

.section2 .section2Content {

margin-top: 10%;

text-align: justify;

margin-bottom: 10%;

}

.mainContent .externalResourcesNav {

margin-bottom: 10%;

}

.mainContent .externalResourcesNav .externalResources {

width: 100%;

height: 35px;

}

/* Footer */

footer {

display: block;

text-align: center;

font-family: sans-serif;

}

/* Media Query for Tablets */

@media only screen and (min-width : 481px) and (max-width : 1024px) {

/* Header */

header {

width: 100%;

float: none;

}

header .profileLogo .logoPlaceholder {

display: inline-block;

font-family: 'Montserrat', sans-serif;

}

header .profilePhoto {

float: left;

clear: both;

margin-right: 3%;

margin-top: 5%;

background-color: #180177;

}

header .profileHeader {

text-align: left;

margin-top: 7%;

}

header .socialNetworkNavBar .socialNetworkNav {

width: 74px;

height: 74px;

display: inline-block;

margin-right: 23px;

}

/* Main content and sections */

.section1 .section1Title, .section2 .section1Title {

text-align: center;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

width: 100%;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

display: none;

}

.mainContent .section1 .section1Content {

display: block;

margin: 0% 0% 0% 20%;

font-family: sans-serif;

margin-top: 5%;

margin-bottom: 5%;

}

.section1Content p a {

}

.section1Content p a {

}

.mainContent .section2 {

clear: both;

}

.section2 .section2Content {

padding: 0px;

margin-left: 20%;

font-family: sans-serif;

margin-top: 5%;

margin-bottom: 5%;

}

.mainContent .externalResourcesNav {

margin-left: 20%;

margin-top: 40px;

margin-bottom: 40px;

text-align: center;

padding-top: 0px;

clear: both;

}

.mainContent .externalResourcesNav .externalResources {

width: 199px;

height: 48px;

margin-top: 5%;

}

/* Footer */

footer .footerDisclaimer {

float: left;

margin-left: 3%;

font-family: sans-serif;

}

footer .footerNote {

float: right;

margin-right: 3%;

font-family: sans-serif;

}

/* Desktops and laptops */

@media only screen and (min-width:1025px) {

/* Header */

header .profileLogo .logoPlaceholder {

float: left;

margin-bottom: 50px;

}

header .profilePhoto {

float: left;

clear: both;

margin-right: 3%;

background-color: #180177;

}

header .profileHeader {

text-align: left;

padding-top: 10%;

}

header .socialNetworkNavBar .socialNetworkNav {

width: 74px;

height: 74px;

display: inline-block;

margin-right: 23px;

}

/* Main content sections */

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

width: 22.5%;

}

.mainContent .section1 .section1Content {

display: block;

margin-top: 0%;

margin-right: 0%;

margin-left: 26%;

margin-bottom: 0%;

font-family: sans-serif;

}

.mainContent .section2 {

clear: both;

}

.section2 .section2Content {

padding: 0px;

margin-left: 26%;

font-family: sans-serif;

}

.mainContent .externalResourcesNav {

margin-top: 40px;

margin-bottom: 40px;

text-align: center;

padding-top: 0px;

clear: both;

}

.mainContent .externalResourcesNav .externalResources {

width: 199px;

height: 48px;

}

/* Footer */

footer .footerDisclaimer {

float: left;

margin-left: 3%;

font-family: sans-serif;

}

footer .footerNote {

float: right;

margin-right: 3%;

font-family: sans-serif;

}

Report · Mar 28, 2018

And here is the html:

<!doctype html>

<html>

<head>

<title>Ripple and Thalassa</title>

</head>

<body>

</div>

<h1>TUISCOPE</h1>

<h3>WHICH AMAZON?</h3>

<hr>

<p><b>FIND RIPPLE AT YOUR AMAZON STORE HERE:</b><br>

<a href="https://www.amazon.com/dp/B00NHAW4PE">Ripple's Amazon USA page</a><br>

<a href="https://www.amazon.ca/Ripple-Dolphin-Story-Tui-Allen-ebook/dp/B00NHAW4PE/">Ripple's Amazon Canada page</a><br>

Ripple's Amazon Australia page<br>

Ripple's Amazon UK page<br>

Ripple's Amazon India page<br>Ripple's Amazon Japan page<br>

Ripple's Amazon Germany page

</p>

</section>

</aside>

</header>

<h2 class="sectionTitle">Contact Details</h2>

<p><span>Email :</span> <a href="mailto:tui@tuiscope.co.nz">Tui at home in New Zealand</a></p>

<p><span>Website :</span> www.tuiscope.co.nz</p>

<p><span>Phone :</span> 09 4038067 if calling from within NZ. If calling from the USA dial 011 649 4038067</p>

<p><span>Address :</span> Bay of Islands, Northland, New Zealand</p>

</div>

</section>

<h2 class="sectionTitle">Content Holder 2</h2>

<h2 class="sectionContentTitle">Tuiscope, Home of the Dolphin Ripple</h2>

<h3 class="sectionContentSubTitle">Position / Date - Year</h3>

<p class="sectionContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>

</article>

<h2 class="sectionContentTitle"> Title & Company</h2>

<h3 class="sectionContentSubTitle">Position / Date - Year</h3>

<p class="sectionContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>

</article>

</section>

<div class="externalResources"> <a href="#" title="Download CV Link">DOWNLOAD CV</a> </div>

<div class="externalResources"><a href="#" title="Behance Link">BEHANCE</a> </div>

<div class="externalResources"><a href="#" title="Github Link">GITHUB</a> </div>

</aside>

</section>

<hr>

<p class="footerNote">John Doe - <span>Email me</span></p>

</footer>

</body>

</html>

Report · Mar 28, 2018

I had a look in different browsers and cannot find any difference in colours. Which links are you referring to in particular?

Have you tried refreshing the cache?

Wappler, the only real Dreamweaver alternative.

Report · Mar 29, 2018

You haven't set anything for a:visited and used a:link to style the your links.

This will result in your links being the right color until the page they represent has been visited. From there, your browser's default visited link color (purple) will take over.

You can do one of a couple things here...

1. You could change "a:link" to just "a" which will give links the teal color until hovered and after being visited
2. ...or, you could add an a:visited selector after your a:link selector and before your a:hover with whatever color you want to have denoting a visited link

If you do decide to use the a:visited selector, remember the link pseudo-classes need to be in the correct order, or they'll break.

I use the mnemonic "Las Vegas Has Action" to remember the css order: :link > :visited > :hover > :active

Report · Mar 29, 2018

Jon, I followed your advice re visited and active and took your mnemonic to heart. It works of course. Thank-you.

Report · Mar 29, 2018

Clear your Firefox cache and history folders. That should wipe out the visited llink styles until you visit them again.

Or change your link styles:

a {

color: #00A981;

text-decoration: underline;

font-weight: bold;

}

a:hover, a:active, a:focus {

color: red ;

text-decoration: none;

}

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 29, 2018

Clearing the history solved it. Thank-you. However, I will be following the other's advice on how to correctly complete the css styling of my links.
It's a long time since I built a web site and it was easier then. I used to know about clearing browser caches and history but had forgotten. So I now see I should have tried that before asking for help. However I'm glad I did because of the other useful advice I've got from you all. Thank you all so much.

Sorry I took so long to respond. I've been out in my kayak forever since posting this. The weather was too good to come home.

Adobe Community

firefox ignores my .css text link properties so links are in the wrong color

1 Correct answer