Spacing between navigation items

After working on my navigation menu locally, I noticed that when I uploaded it online, some changes didn't take effect on Chrome and the design on Firefox was different from what I intended. I'm not sure what I might be doing wrong here. Here is a link to the design and a live URL for the current progress.

Some issues I am trying to address include:

1. Ensuring the overall design is correct 2. Removing the blank space between each menu item

Design:

URL:

HTML

<div id="navigation"> 
                        <ul>
                            <li class="home-nav-bg"><a href="#"></a>
                            <li class="how-nav-bg"><a href="#">Example Us</a>
                            <li class="boxes-nav-bg"><a href="#">Example</a>
                            <li class="recipes-nav-bg"><a href="#">Example</a>
                            <li class="food-nav-bg"><a href="#">Example</a>
                            <li class="kitchen-nav-bg"><a href="#">Example</a>
                            <li class="nav-end-bg"><a href="#"></a></li>
                        </ul>
                </div>

CSS

    #navigation {
    margin-top: 10px;
    margin-bottom: 20px;
    float: right;
    width: 700px;
    margin-right: -50px;
}

#navigation ul {
    text-decoration: none;
    list-style-type: none;
    display: block;
}

#navigation li {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    text-align: right;
}

#navigation li a {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
    text-align: right;
}

.home-nav-bg {
    background-image: url('../img/home-nav-bg.png');
    padding-right: 40px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.how-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.boxes-nav-bg,
.recipes-nav-bg,
.food-nav-bg,
.kitchen-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.nav-end-bg {
    background-image: url('../img/nav-end-bg.png');
    padding-left: 5px;
    padding-right: 12px;
    padding-top: 17px;
    padding-bottom: 45px;
}
htmlcssnavigation

Answer №1

An issue arises with inline and inline-block elements in that the browser adds whitespace between them, as these elements are typically associated with text, such as words.

To resolve this, you can convert them to display block and float them, or explore other techniques detailed in this article. Personally, I tend to opt for using inline-block.

http://example.com/maintaining-consistency-among-inline-elements/

Answer №2

Give this a try:

#menu li{
 font-size: 0.9em;
 color: #222;
 display: inline-block;
 float: right;
 height: 50px;
 line-height: 50px;
}
.menu-bg{
background-image: url('../images/menu-background.png');
width: 120px;
height: 80px !important;
}

It should work smoothly.

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

Hover over parts of an image to bring attention to them

I am interested in developing a webpage featuring a black and white image of 5 individuals. When hovering over each person, I would like them to illuminate and display relevant information in a dialog box next to them. Do you have any tips on how I can ac ...

javascriptjquerycss

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

javascripthtmlangularjs

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...

javascriptcssangularsassangular-material

problem encountered when inserting data (GET method) in a loop using window.location

I'm currently utilizing sailsjs to extract data from the GET parameter within the URL (mydomain.com/prod_master/addsupp). The specific page is /prod_master/addsupp, designed to receive GET parameters for database insertion. In my Javascript code, I ...

javascriptjqueryhtmlnode.jssails.js

Issue encountered while trying to exhibit jpg image content from server side on html

I am attempting to display an image from server-side data using an Ajax call. The data stored on the server looks something like this: "ÿØÿàJFIFÿÛC4­¶¸UOHlʵcBò)3¹_È'I4~&éüÿ§Ú<ã©ã4>'Øù¿ÇÄmËCÈgÚsZ¥ë" Upo ...

javascripthtmlangularjsajax

The positioning of the Bootstrap dropdown menu is not aligned correctly

Issue with positioning Bootstrap dropdown I recently encountered a problem where I placed a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", but the dropdown menu still appeared in its original position. It seems l ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How to Center a DIV both Vertically and Horizontally with CSS Positioning?

I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the ...

htmlcss

Unable to Publish HTML File

I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...

jqueryhtmltwitter-bootstrap-3

Transforming the content of a <div> into a variable in PHP

There is a website where you can place orders for various products. The titles of the products available to order are embedded in the HTML code like this: <div class="whatever"> Title </div> I am trying to extract this "title" and assi ...

phphtml

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

Align an element in the middle next to its sibling element

Utilizing the pagination component in Bootstrap, the structure of the pagination itself is quite straightforward: <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo; ...

htmlcss

Switching up the styles in PHP-embedded HTML by tweaking the CSS

I used PHP to create HTML elements by echoing them out, but I ran into an issue when trying to change the CSS for those HTML elements. Can you help me figure out how to do this? The PHP } else { include("steamauth/SteamCo ...

phphtmlcss

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...

javascripthtmljquerycsscss-transitions

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

htmlcsstwitter-bootstrapbootstrap-4

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

csshtml

Leveraging static elements in a fluid design using solely CSS whenever feasible

Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...

cssresponsive-designfixed

Eliminate the dark backdrop from html5 videos that only shows up for a brief moment

Is there a way to remove the brief black background that appears when loading an HTML5 video? I have tried using CSS without success. The HTML: <div id="start-screen"> <video id="video-element"> <source src="video-mp4.mp4" type="vide ...

csshtmlvideohtml5-video

Regularly fetching images from PHP page

Recently, I encountered a challenge with a PHP page that retrieves arguments from the URL to generate an image. The image type (png, gif, etc.) is unknown. Typically, the page is used to embed the image in a standard HTML page like so: <img src="page.p ...

phphtmlimage

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

I am facing a challenge in selecting an h1 element from a remote page that I have loaded into $(data). Despite several attempts, I am struggling to write the correct code. When I use this code: console.log($(data)); The output is as follows: [text, meta ...

javascriptjqueryhtml