Variations in CSS display across various browsers

I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome.

The code I have is very simple. It's supposed to change the color of links when visited, but instead, it keeps applying the 'visited' properties to all my text.

My goal is to simply change the color of the link while in the 'link' and 'visited' state.

HTML :

<!DOCTYPE HTML>
<html>    
    <head>
        <link rel="stylesheet" href="CSSworking.css">
        <title>Html Working</title>
    </head>

    <body>

        <ul class="main">
            <li><a href="#">Home</a></li>
            <li><a href="#">Our Kitchen</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Go Down</a></li>
        </ul>

    </body>

</html>

Here is the CSS:

.main {
    text-decoration: none;
    list-style:none;
    margin-left: 60px;
}
.main li {
    display: inline-block;
    margin: 20px;
}
.main li a:link {
    color:pink;
    text-decoration: none;
}
a:visited {
    color: green;
}
a:hover {
    border-top: 4px solid red;
}

Answer №1

Using '#' as the link for all of these will result in using the same local anchor, causing them to all be marked as visited once you visit one.

To test this theory, try switching to external links like '', '', etc and see if the issue persists.

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

What is the best way to embed an image into HTML code?

I am trying to enhance the appearance of a phone number inside an HTML code that is loaded into a UIWebView by adding a background image. NSString *stringToReplace = [NSString stringWithFormat:@"<a style=\"color:white; background-color:#707070; te ...

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

"Troubleshooting a dropdown navigation bar problem in CSS

I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and yo ...

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

"Going beyond the ordinary: An exclusive look at the Outlook newsletter design

I'm struggling with adding text and a background image to a TD in a newsletter. While the background shows up, the text is not being displayed as expected. Below is the code snippet I've been using: {if !empty($aModules.mkNews)} ...

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...

Display the Bootstrap dropdown menu on the right-hand side

I am currently working on a dropdown menu and I would like the dropdown items to be displayed on the right side. The functionality is working, but there seems to be an issue where the dropdown menu is not fully visible. The dropdown menu is located within ...

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

Steps for implementing a Material-UI transition effect with hover using pseudo classes

My useStyles hook code is meant to create a full-page background that changes on hover, but for some reason it isn't working. I came across a similar solution in CSS which works perfectly. Can you help me figure out the issue? Code snippet that' ...

In the world of Angular, whitespace is simply treated as non-existent when it comes

Within the controller, I have an array structured as follows: 'Pipe': '|', 'Comma': ',', 'Tab': '\t' }; When configuring ng-options in my code, it is implemented in this manne ...

Modify how various classes are shown when hovering over a pseudo class

This is my customized scss code .image-container { position: relative; .delete-image { display: none; position: absolute; top: 0px; right: 0px; } .make-primary { display: none; position: absolute; ...

Using Selenium Web Driver to extract information from Google's knowledge graph

Currently utilizing the Ruby Selenium web driver, my goal is to extract content from the Google Knowledge Graph located on the top right-hand side of the search results page. This element is within the <div class="xpdopen"> section. @driver = Seleni ...

Prevent background music from being manipulated

I've implemented an audio HTML element with background music for a game: <audio class="music" src="..." loop></audio> However, I have encountered an issue where upon loading the page, I am able to control the music usi ...

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

Button for Selecting Colors

I love the color picker button on Google Keep, where a variety of colors pop up for selection. I'd like to add something similar to my website. What steps should I take to implement this feature? ...

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

Guide to centering images with HTML and CSS

I've recently created a website with a homepage design that I'd like to tweak. Currently, the layout looks like this : https://i.stack.imgur.com/5UeUn.jpg My goal is to reposition the ficstore logo to the center and divide the bar into two halv ...

Using jQuery to load content into a jQuery UI dialog box

I am looking to implement a pop-up that displays content from another asp page. To achieve this, I am using jquery.load to load the page into a div and jquery-ui.dialog. This is my code: <div id="dialog"></div> Inside the document ready fun ...