The color of hyperlinks in firefox varies based on the specific URL being visited

I am a beginner in the world of html and css. I have two links placed consecutively. In my css file, I have defined classes for a:link and a:hover. However, I noticed that the second link is displaying a purple color instead of silver. Both links correctly change to a gold hover color when hovered over. Interestingly, changing the href attribute of the second link from 

href="http://*******.blogspot.co.uk/search/label/Past%20Performances"
to 
href="http://*******.co.uk/search/label/Past%20Performances"
fixes the issue by removing the .blogspot. part of the url. I tested this in Chrome and did not encounter the same problem.

CSS:

a:link {
    color: var(--silver-color);
    text-decoration: underline;
}

a:hover {
    color: var(--gold-color);
    text-decoration: underline;
}

HTML

<a title="Send email to Erica" href="mailto:********@hotmail.co.uk" target="_blank">emailing us</a>.
<a title="Erica's blog page" href="http://********.blogspot.co.uk/search/label/Past%20Performances" target="_blank">Erica's blog</a>
htmlcssfirefoxcolorshyperlink

Answer №1

To style visited links, simply use the :visited selector.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

What is the definition of "top of the page" within a PHP document?

One source claimed that ob_start() should be placed at the top of the page, while another insisted that session_start() should take precedence. I also came across a guide stating that header() belongs at the beginning of the page. Additionally, I read th ...

phphtml

Using HTML and CSS to create nested divs floating to the left while also incorporating a

I'm trying to create a simple effect where a fixed height and width div contains a series of child divs that can be scrolled horizontally. However, the children are not floating as expected in the following code: .a {width:200px; height:200px; ...

htmlcsscss-float

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

javascripthtmlcssanimationaframe

A guide to setting up a Python CGI web server on a Windows operating system

I am looking to set up a basic Python server on a Windows system to test CGI scripts that will ultimately run on a Unix environment. However, when I access the site, it displays a blank page with no source code visible. I am struggling to identify the issu ...

pythonhtmlpython-3.xwebservercgi

Learn how to toggle a specific div by clicking on an image generated from an ngFor loop in Angular version 11

One issue I am facing is that I have multiple sections containing image info and details. When I click on a specific image, the corresponding details should toggle. Everything works fine, however, if I click on another image without closing the previous ...

javascripthtmlangular

An element generated using a JavaScript loop is covering another element in the layout

I am facing an issue with positioning images within a div to a span. The problem arises as the images are overlapping each other and I am uncertain about how to properly place each image when it is added. Below is the code snippet: The CSS: <style ty ...

javascripthtmlcssarraysfunction

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

Concealing a CSS class with PHP within the Wordpress Woocommerce platform

I have very limited knowledge in programming and need help with a code snippet. I am using the Wordpress Snippets Plugin to hide the Add Cart Button from a single product. add_action( 'wp', 'rudr_remove_add_to_cart_single_product' ); fu ...

phpcsswordpressclasswoocommerce

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

javascripthtmlcss

Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link: It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image: htt ...

htmlcssweb

Creating columns in Bootstrap 4 with equal height content

Why is the height of each individual p tag within each column dictated by the length of the string of text and not by the column height, even though bootstrap 4 comes pre-loaded with equal height columns? I just want each client bubble to appear uniform wi ...

htmlcssbootstrap-4flexboxheight

Retrieve data from HTML in order to apply styling to an element

I am attempting to set the width of my .bar-1 outer span element based on the value of my inner span element. <span class="bar bar-1"> <span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabinde ...

htmlcss

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

cssreactjsmaterial-uireact-hooksjss

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

javascripthtmlcss

Upon loading the webpage, Firefox prompts the user to download the site

While my website functions properly on Internet Explorer, I encounter an issue when trying to open it on Firefox. Instead of opening the page, Firefox prompts me to download the file and opens the Download File dialog. This problem also occurs at times in ...

htmlhttpfirefoxweb

Where can I locate HTML codes within WordPress?

Upon inspecting the page source, I came across the following code snippet; I attempted to search within WordPress for the HTML codes that are displayed here, but unfortunately, I was unable to locate them. I couldn't find any files with a .html exte ...

phphtmlwordpress

Execute various settimeout or display functions on various elements of a webpage

Just a heads up, I'm not really experienced in development. More on the newbie side of things, but eager to learn. I've been looking for an answer to my question, but so far haven't come across anything that fits my specific situation. It m ...

javascriptjqueryhtmlsettimeout

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css