In Chrome, a horizontally floating item is pushed down, whereas in Firefox it remains in place

What is causing the last item in the submenu to be lower than the rest in Chrome, but aligned in Firefox?

Check out this JSFIDDLE with font turned red for visibility

View the ACTUAL SITE here

I've experimented with padding, margin, vertical align, last child selection, and more. Still puzzled. Thank you for your help.

#hmenuWrapper {
    width: 100%;
}

#hmenu, #hmenu ul, #hmenu ul li, #hmenu ul li a {
    padding: 0;
    margin: 0;
    line-height: 1;
    font-family: 'Arial', sans-serif;
}

#hmenu:before, #hmenu:after, #hmenu > ul:before, #hmenu > ul:after {
    content: '';
    display: table;
}

#hmenu:after, #cssmenu > ul:after {
    clear: both;
}

#hmenu {
    position: relative;
    top: 0px;
    left: 180px;
    zoom: 1;
    height: 60px;
    width: 740px;
    background: url(../media/images/bottom-bg.png) repeat-x center bottom;
    border-radius: 2px;
}

#hmenu ul {
    background: url(../media/images/nav-bg.png) repeat-x 0px 4px;
    height: 69px;
}

#hmenu ul li {
    float: left;
    list-style: none;
}

#hmenu ul li a {
    display: block;
    height: 37px;
    padding: 17px 14px 0;
    margin: 4px 0px 0;
    border-radius: 2px 2px 0 0;
    text-decoration: none;
    font-size: 15px;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    font-weight: 400;
    opacity: .9;
}

#hmenu ul li:first-child a {
    margin: 4px 0px 0 0;
}

#hmenu ul li:last-child {
    background-color: #168b09;
}

#hmenu ul li a:hover {
    background: url(../media/images/colorHover.png) center bottom;
    display: block;
    height: 37px;
    margin-top: 0px;
    padding-top: 20px;
    color: #616161;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    opacity: 1;
}

#hmenu ul li.active a {
    background: url(../media/images/color.png) center bottom;
    display: block;
    height: 37px;
    margin-top: 0px;
    padding-top: 20px;
    color: #616161;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    opacity: 1;
}



#nav-wrap {
    position: relative;
    left: 180px;
    top: -3px;
    zoom: 1;
    height: 40px;
    width: 740px;
    float: left;
    background: url(../media/images/colorinv.png);
}

#nav {
    display: inline;
    height: 40px;
    width: 100%;
}

#nav a:hover {
    color: #444444;
    text-decoration: none;
}

#nav li:hover {
    background: url(../media/images/nav-bginvHover.png);
}

    #nav a li:hover  {
        color: #444444;
    }


#nav ui li a {
    height: 40px;
    width: 185px;
}

.nav-item {
    float: left;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    width: 185px;
    list-style-type: none;
    color: white;
}

.nav-item a {
    height: 40px;
    width: 185px;
}

#nav li.nav-sel {
    float: left;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 185px;
    list-style-type: none;
    color: white;
    font-family: 'Arial', sans-serif;
    background: url(../media/images/nav-bginv.png);
}

#nav li.nav-sel a {
    color: white;
    height: 40px;
    width: 185px;
    line-height: 40px;
}

Answer №1

Get rid of the display: inline in #nav, it's unnecessary: https://jsfiddle.net/ry5mLkaL/1/

Additionally, there is an issue with your HTML starting at line 42. It's incorrect to enclose a List Item with an Anchor (or anything else). The anchor should be nested inside the List Item.

<ul id="nav">
    <a href="pages/companyServices.html"><li class="nav-item">Company Services</li></a>
    <a href="pages/skyAdvantages.html"><li class="nav-item">Sky Advantages</li></a>
    <a href="pages/customerRecognition.html"><li class="nav-item">Customer Recognition</li></a>
    <a href="pages/newsReleases.html"><li class="nav-item">News Releases</li></a>
 </ul>

Change it to:

<ul id="nav">
     <li class="nav-item"><a href="pages/companyServices.html">Company Services</a></li>
     <li class="nav-item"><a href="pages/skyAdvantages.html">Sky Advantages</a></li>
     <li class="nav-item"><a href="pages/customerRecognition.html">Customer Recognition</a></li>
     <li class="nav-item"><a href="pages/newsReleases.html">News Releases</a></li>
</ul>

Answer №2

The reason for the issue is related to #nav having display:inline property. The solution is to change it to display:table-row;

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

Having trouble getting StencilJS Bottomsheet to work properly? Looking for a way to smoothly slide up your content?

I've been working on creating a Bottomsheet in Stencil, but I'm facing an issue where it shows up suddenly when activated. My goal is to display the overlay when the active property is set, and then smoothly slide up the content. Below is my comp ...

When using PHP to send Push Notification messages, I am encountering a problem where I am receiving a backslash () and an apostrophe ('

My PHP script is designed for sending push notification messages to phones. We can successfully send and receive normal messages, but encounter issues when using an apostrophe (') in the message. After researching online, I discovered a PHP function c ...

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"

Individual functionality for both the form and css has been achieved, but when trying to implement them together, they do not work as intended. This integration is specifically for a windows sidebar gadget. Here is the structure of the form: <form nam ...

Can a time duration be applied to the background image of a DIV element?

Is there a way to set different time spans for background images of a DIV? Has anyone tried using jQuery for this task? I'm looking to have the first image displayed for 20 seconds, then switch to the second image for 5 seconds. Is it possible to ach ...

interactive form fields updating using javascript

Hey there! I'm a beginner in web development and currently facing a challenge. I have a form with 2 fields generated by one drop-down menu. I've managed to generate one field, but struggling to get the other due to my limited knowledge. I just ne ...

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

So I'm working with this mat-card: <mat-card> <mat-card-content> <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};"> <site-details [site]='siteSource'></s ...

Error: Trying to access 'MaterialModule' before it has been initialized results in an uncaught ReferenceError

I have been working on a form for a personal project and attempted to implement a phone number input using this example: . However, after trying to integrate it into my project, I encountered an error. Even after removing the phone number input code, the e ...

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

According to the information provided on this website, it is recommended to enclose the top-bar navigation within a div element that has both the class "contain-to-grid" and "sticky". However, I have noticed that while the "contain-to-grid" class exists in ...

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

What is the method to obtain the coordinates based on a city name, and subsequently store those coordinates in a variable?

I'm currently exploring ways to extract the geographical coordinates based on user-provided city names. I am aware that Google offers this functionality through their API, but I am struggling with how to actually capture and store these results in PHP ...

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...

Determine the count of checkboxes on a webpage by identifying the presence of the keyword 'type' in the page source code, utilizing Selenium with Python

Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...

Combining a background image and gradient in Internet Explorer: a comprehensive guide

I recently encountered a challenge while trying to apply a gradient and a background image to an element using CSS. After utilizing Colorzilla for the gradient, I obtained the following code snippet. background: rgb(250,250,250); background: -moz-linear-g ...

Creating a dynamic MPTT structure with expand/collapse functionality in a Django template

I am looking for a way to display my MPTT model as a tree with dropdown capability (open/close nodes with children) and buttons that can expand/collapse all nodes in the tree with just one click. I have searched for examples, but the best I could find is ...

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

Modify dates on constant URL and run the link

I've got a link that looks like this: Is it possible to create an HTML form with two input date fields and merge them into a single link similar to the one above? I want to select dateFrom and dateTo separately, then click GO to access the link. I&a ...

Modify the shading of the mesh generated with the face3 method

I have utilized face 3 and three js to generate a mesh, but the expected color is not displaying correctly on the mesh. Below is the code snippet I used: var geometry = new THREE.Geometry(); var f = 0; for (var i = 0; i < data.real.length ...

Vue.js fails to display multiple uploaded images

I have been working on implementing a multiple image upload feature using vue.js. So far, everything seems to be functioning correctly. However, I am facing an issue where the HTML does not display thumbnails of the images I have selected. Additionally, I ...

Raphael JS Path Animation: Wiping Away

I have successfully created a line animation using RaphaelJS, which can be viewed on this jsfiddle link - http://jsfiddle.net/7n040zdu/. My next challenge is to create an erasing animation that follows the initial one. This erasing animation should mimic t ...