Highlighted

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

Participant ,
Mar 28, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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;

Views

477

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Mar 28, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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;

Views

478

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 28, 2018 0
Adobe Community Professional ,
Mar 28, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 28, 2018 1
Participant ,
Mar 28, 2018

Copy link to clipboard

Copied

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;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 28, 2018 0
Participant ,
Mar 28, 2018

Copy link to clipboard

Copied

And here is the html:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Ripple and Thalassa</title>

<link href="../AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>

</head>

<body>

<!-- Header content -->

<header>

    <div class="profilePhoto">

    <img src="../images/profile2bubble.png" width="259" height="314" alt="view from Tui's kayak" title="view from Tui's kayak"/>

    <!-- Profile photo -->

    </div>

  <!-- Identity details -->

  <section class="profileHeader">

    <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>

  <!-- Links to Social network accounts -->

  <aside class="socialNetworkNavBar">

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.facebook.com/tui.allen.7"><img src="../images/fb-logo.png" alt="facebook-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://twitter.com/tuiallen"><img src="../images/twitter-logo.png"  alt="twitter-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.youtube.com/user/tuilorraine/featured?view_as=subscriber"><img src="../images/youtube-logo.png"  alt="youtube-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <img src="../images/amazon-logo.png"  alt="amazon-icon"> </div>

  </aside>

</header>

<!-- content -->

<section class="mainContent">

  <!-- Contact details -->

  <section class="section1">

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

    <hr class="sectionTitleRule">

   

    <div class="section1Content">

      <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>

  <!-- Previous experience details -->

  <section class="section2">

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

    <hr class="sectionTitleRule">

<!-- First Title & company details  -->

    <article class="section2Content">

      <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>

    <!-- Second Title & company details  -->

    <article class="section2Content">

      <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>

    <!-- Replicate the above Div block to add more title and company details -->

  </section>

  <!-- Links to expore your past projects and download your CV -->

  <aside class="externalResourcesNav">

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

    <span class="stretch"></span>

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

    <span class="stretch"></span>

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

  </aside>

</section>

<footer>

  <hr>

  <p class="footerDisclaimer">2014  Copyrights - <span>All Rights Reserved</span></p>

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

</footer>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 28, 2018 0
Adobe Community Professional ,
Mar 28, 2018

Copy link to clipboard

Copied

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?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 28, 2018 1
Adobe Community Professional ,
Mar 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2018 1
Participant ,
Mar 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2018 0
Adobe Community Professional ,
Mar 29, 2018

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2018 0
Participant ,
Mar 29, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2018 0