What could be causing my ul CSS to function properly in Internet Explorer but fail in Chrome?

Why does my CSS work fine on Internet Explorer but not on Chrome? The formatting doesn't show up in Chrome, appearing plain as if the CSS isn't being applied. It works when I place the css directly inside the head tag of the html, but I need it in a separate CSS file for other reasons.

I would appreciate any help :)

This snippet is from my HTML:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

And this snippet is from my CSS:

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 900px) {
    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
    ul.sidenav li a {
        text-align: center;
        float: none;
        }
    }

Answer №1

I'm not entirely sure why that issue was occurring, but I decided to uninstall Chrome and then reinstall it, and surprisingly it now seems to be working fine.

Well, problem solved for now!

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

Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...

What are the steps to include an image in the body of an email when sending it through SMTP?

I'm currently working on creating an email verification module and I want to include my company logo at the beginning of the message. However, all the solutions I've come across so far only explain how to attach an image to the email. What I aim ...

Closing on submit the modal window

I'm encountering an issue with a form in a bootstrap modal window. When I click the 'send' button, the modal closes and displays a white page with the error message from my action call to contact-form.php. However, the error message should a ...

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

Updating the permanent placeholder text when selecting autocomplete results using JavaScript

I am seeking assistance with a javascript puzzle in my code. I am currently learning javascript and jquery, and although I may be a bit rusty, I am eager to get back into coding. One of the tasks I have accomplished is creating an autocomplete searchbox. T ...

Responsive Ionic columns for listing items

Can you please try resizing this code snippet: http://codepen.io/anon/pen/zxGbbx <ion-content> <ul class="list"> <a class="item" ng-repeat="thread in data" ng-href="{{thread.url}}" target="_blank"> <li class=""> ...

Display the CSS dropdown menu as a block`

I've been attempting to design a dropdown menu. My goal is for the anchor tag to display when hovered over. I understand that using display:block won't work when the 'a' is not part of the block, but I'm unsure how to proceed. Any ...

Update the appearance of a webpage using a custom JavaScript function

My goal is to modify a CSS style whenever a button is clicked. In order to achieve this, I have implemented a JavaScript function that creates a new class for CSS along with several other functionalities. Here's how the JS function currently appears: ...

Locked first row and first column in HTML table

I'm struggling with freezing the first row and column in an HTML file exported from Microsoft Excel. When attempting to add position:fixed; to achieve this, I noticed that it changes the size and alignment of the headers. Can someone please advise me ...

The full screen implementation is currently only covering approximately 70% of the total screen space available

After clicking the button, my full screen display looks like this: |---------------| |---------------| |---------------| | | horizontal scroll | | | | | | The issue is that it only takes up 80% of t ...

Modify Knockout applyBindings to interpret select choices as numeric values

Utilizing Knockout alongside html select / option (check out Fiddle): <select data-bind="value: Width"> <option>10</option> <option>100</option> </select> Upon invoking applyBindings, the options are interprete ...

Issue with retrieving data from dataTransfer on 'drop' event due to undefined value

I'm currently working on implementing Drag & Drop functionality using AngularJS directives. Here's the concept I am trying to execute : Check out my codePen However, I keep encountering an error saying 'getData' is undefined. Th ...

Sending information to Bootstrap 4 modal

Can you help me insert the variable into this link? <a href="#edit_task" data-toggle="modal"><i class="fas fa-edit fa-lg fa-fw"></i></a> This is my modal: <div class="modal fade" id=" ...

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

TypeScript: displaying parameters

variable_field = [["S",".","."],[".","#","."],[".",".","T"]]; <ng-template ngFor let-array [ngForOf]="field_array" let-x="index"> <ng-t ...

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

Is there a way to include a button at the top of the Notiflix.Loading() overlay for closing or stopping it?

I've integrated the "notiflix" library into my project, and I'm currently using notiflix.loading.pulse() for a lengthy process. While this works perfectly fine, I would like to add a button (for closing/stopping the process) on top of the loading ...

Mysterious purple squares mysteriously popping up around elements in a WordPress website utilizing CSS Bootstrap 4

While browsing certain websites on specific browsers that utilize Bootstrap 4 as a framework within a WordPress site, I've noticed some elements displaying strange purple squares when visited. Any ideas on the cause of this issue and how it can be res ...

What steps can I take to prevent Javascript/JQuery from repositioning other elements on the webpage?

Is there a way for the animation code to only affect the show/hide toggle buttons and not interfere with the other jQuery code I have implemented for hiding and showing div text? When I included the animate code in my js page, it caused issues with the exi ...

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...