Navigate to the first item on the menu in the Chrome browser

Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox.

    <body>
        <header>
            <div class="con_header">
                <h1> SITE NAME</h1>
                <nav>
                    <ul>
                        <li class="chosen"><a href="">HOME</a></li>
                        <li><a href="">ABOUT</a></li>
                        <li><a href="">SERVICES</a></li>
                        <li><a href="">PORTFOLIO</a></li>
                        <li><a href="">CONTACTS</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>


header {
    background-color: #202628;
    height: 80px;
    color: #e7e7e7;
    font-family: 'Roboto Condensed', sans-serif;
}
.con_header{
    width:1170px;
    margin: 0 auto;
}
.con_header h1{
    float: left;
    width:500px;

}
.con_header nav{
    float: right;
    width:600px;
}
.con_header::after{
    content:'';
    display:block;
    clear: both;
}

.con_header ul{
    margin-top:26px;
    padding: 0;
}
.con_header li{
    display: inline;

}
.con_header li a{
    color: #e7e7e7;
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
    margin: -4px;
}
.con_header li a:hover{
    color: #e7e7e7;
    background-color: rgb(232,76,61); 
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
    margin: -4px;
}
.chosen{
    color: #e7e7e7;
    background-color: rgb(232,76,61); 
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
}

Answer №1

Produces identical results in both Chrome and Firefox. Any issue that may arise is unlikely to be related to your code. Consider utilizing the css reset tool to minimize differences between browsers.

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

Inspect the data attribute and modify the class

I am looking to determine if a data attribute has a specific value and then update the class associated with it. For example, in my HTML code: <li class="country active" data-country-code="ca"><div class="flag ca"& ...

What steps can be taken to ensure that an element is perfectly centered within a div?

I have a div containing some images: <div> <img src="1.png"> </img> <img src="1.png"> </img> </div> Currently, the layout in browsers looks like this: ----------------- |XX | ----------------- H ...

What is the best way to modify a newly added element using jQuery?

When a user clicks a button on my screen, a new template is loaded dynamically using jQuery's .load() method. This transition adds new HTML to the page that was not present when the script initially loaded: (function($) { $('.go').on("c ...

Create a universal variable in jQuery for an element that is not currently present in the DOM

I'm currently developing a page where users can dynamically create a form by clicking to insert input fields. Initially, there are no input elements present on the page. When a user clicks to create them, I am attempting to set up global variables to ...

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...

Outputting HTML using JavaScript following an AJAX request

Let's consider a scenario where I have 3 PHP pages: Page1 is the main page that the user is currently viewing. Page2 is embedded within Page1. It contains a list of items with a delete button next to each item. Page3 is a parsing file where I send i ...

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

Exploring ways to maximize the width of responsive images on a webpage

I am currently working on a website located at . The slider image dimensions are set to 800x400, but the height appears too large. I need assistance in making the slider images responsive while maintaining their full width without sacrificing height. Ple ...

Issue with Vue2: encountering an error with the view-router component when attempting to utilize the <router-view> tag

Currently delving into Vue2 for the first time and facing hurdles with routes. Ever since I inserted <router-view></router-view> in index.html, an exception has been popping up: [Vue warn]: Failed to mount component: template or render functi ...

Scrolling to a specific element using jQuery after a specified delay has

On my website, I have a page with an autoplaying video located at . My goal is to implement a feature where once the video completes playing after a specific duration, the webpage will automatically scroll down to the text section. This scroll action sho ...

Tips for deactivating the range slider in jquery once the checkbox is marked

I need assistance with disabling my range slider when a checkbox is checked using jQuery. If the checkbox is unchecked, then I want the range slider to be enabled. Here's the code snippet I have: $(document).on('change','#checkbox6b&ap ...

Utilize ng-repeat to iterate over two arrays

Two arrays are at my disposal here. The first array contains option content, while the second array consists of option tags (i.e., A, B, C, D). How can I structure the layout for the 'input type="radio"' using ng-repeat? To start off, I am attem ...

Dynamic CSS Changes in AngularJS Animations

I am currently working on a multi-stage web form using AngularJS. You can see an example of this form in action by visiting the link below: http://codepen.io/kwakwak/full/kvEig When clicking the "Next" button, the form slides to the right smoothly. Howev ...

What is the impact on positioning when including a class in Angular?

I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent. To see the issue in action, chec ...

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

Making asynchronous requests to a web API endpoint using Ajax

I'm currently working with the following view structure : <div id="addDisplay" class="display"> <div class="box-header"> <h3 class="box-title">Ajouter un compte</h3> </di ...

Where can I find a CDN version of a block UI jQuery library?

I'm trying to find a more efficient way to use libraries like blockUI, preferably through a CDN rather than hosting it on my own site. Unfortunately, I keep encountering a 403 error when attempting to link directly to the blockUI file on github. Are t ...

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...