The background image fails to completely cover the width of the element

Within the confines of this specific website, the menu was delicately put together with a defined format as follows:

<ul>
    <li class="page_item page-item-2 current_page_item">
        <a href="index.html">Home</a>
    </li>
    <li class="page_item page-item-7">
        <a href="features/index.html">Features</a>
    </li>
    <li class="page_item page-item-18">
        <a href="news-reviews/index.html">News &amp; Reviews</a>
    </li>
    <li class="page_item page-item-20">
        <a href="contact/index.html">Contact</a>
    </li>
</ul>

The current_page_item class was cleverly designed to alter the background of the active menu item to black by following this defined rule:

.mainnav li.current_page_item a {
    background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}

This method effectively works for the Home menu, however, it seems that there is a minor gap remaining on the left side of all other selected menu items causing a visual flaw as indicated by the yellow circle in the image below.

Despite my efforts, I am unable to discern the root cause of this issue persisting among all menu items besides Home.

htmlcss

Answer №1

The <li> elements in your code have a style of display: inline-block; and there are spaces between them.

Since the <li> elements are set to inline-block, they will consider whitespace in the HTML, similar to how inline elements and text behave.

Ultimately, the background image is being displayed correctly within the element. To eliminate the spacing, it's recommended to remove any whitespace between the </li> and the next <li> tags.

As pointed out by @ajp15243 below, you have the option to omit the closing tag or use creative solutions to handle the whitespace in the HTML rendering.

Answer №2

To achieve a centered menu with the display:table-cell property for the .mainnav_wrapper .mainnav ul li class, you can simply add padding to your ul element:

.mainnav_wrapper ul {
    padding-left:192px; // this is specific to this project
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 960px;
}

Once you have made these adjustments, your menu items will be perfectly centered and you are good to go!

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 align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

CSS vertical alignment techniques

I am having an issue with aligning text in a <div> within an <li>. The size of the text keeps changing. This is my HTML: <li id="button_welcome"><div>Welcome</div></li> And this is my CSS: #about_nav li{ height:4 ...

htmlcssvertical-alignment

Can an image be resized to fill either the full height or width based on its orientation?

Looking to display a dynamic list of images with varying sizes and orientations - some landscape, some portrait. The challenge is that the landscape images should fill 100% width of their parent container, while the portrait images should fill 100% height ...

htmlcss

Using jQuery's .post() method to automatically scroll to the top of

Is there a way to prevent the automatic scrolling to the top of the page when executing the buy function? Here is the code snippet involved: <a href="#" onClick="buy(id)">Buy</a> The buy function utilizes the $.post() function for processing t ...

javascriptjqueryhtmlajaxscroll

Adjust the height of the parent (div) to match the size of its child (p) following a window resize

$(window).on("resize", function () { var totalHeight = 0 var $p = $("#cwt-help").children(); $p.each(function () { totalHeight += $("#cwt-help").outerHeight(); }); $("#cwt-help").css({ "height": totalHeight }) }); I'm ...

javascriptjqueryhtmlcss

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

Trouble with line breaks in expandable rows of data grid causing clarity issues

Exploring the expandable rows feature of Clarity datagrid for the first time. I initially thought I could insert any HTML code within the collapsed view to show content. Using VMware's expandable datagrid: However, I am facing an issue where even wh ...

cssangularvmware-clarity

Activating event with mouse click or keyboard shortcut

I have a function that displays a form dialog with JqGrid when a link is clicked. This is how my code looks: HTML: <div id="mainDialog"> <a href='#' class='showList'>Show list [Ctrl+L]</a> .... </div& ...

javascriptjqueryhtmljqgrid

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

Tips on shifting an image within a canvas

Can anyone provide guidance on moving an image inside a canvas shape or stroke, similar to the design showcased on ? Are there any tutorials available for creating this type of effect? Thank you! ...

jqueryhtmlcanvashtml5-canvas

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

My blog was completely thrown off by the modifications made in the Blogger Template HTML editor

I've been working on integrating jQuery tooltips into my Google Blogger Template. However, I encountered an issue where adding code to the template HTML resulted in all content on the page becoming invisible. When I apply a new template, this is how ...

jqueryhtmltemplatesblogger

Web element not detected within Span Tag

Within my HTML, I have the following: <span class="login-link">Log in</span> The code snippet I am using is: driver.findElement(By.cssSelector("#login > span")).click(); I have tried utilizing xPath, cssSelector, and id, but none of them ...

javacssseleniumxpathselenium-webdriver

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

javascripthtmlangularjsdom

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

http://jsfiddle.net/PeKdr/ Encountering an issue when having a JavaScript variable that contains both HTML and JavaScript, resulting in unexpected behavior in the output window. Neither of the buttons - one triggering the function appendTheString() or the ...

javascriptjqueryhtmlappend

What is the best way to elegantly transition an element with Hammer.js and JQuery?

As I work on developing a versatile web application meant for use on computers, tablets, and possibly smartphones, I've encountered a design challenge with the menus. Currently, the menus are laid out horizontally on one page, allowing users to swipe ...

javascriptjqueryhtmlcsshammer.js

Bootstrap - A collapsed navigation button that remains fixed without the rest of the navbar

I'm currently working on a responsive drag and drop game that utilizes Bootstrap and jQuery UI. Within the game, I have implemented a collapsible navbar at the top of the page. To optimize space for buttons at the bottom, I am looking to hide the nav ...

jqueryhtmlcsstwitter-bootstrap

Choosing our hourly availability?

I came across a reference to a similar question on Stack Overflow. Although I attempted to find a solution, I have not been successful so far. <div class="form-group"> <label>Working Hours :</label> <div v-for="value in day" c ...

javascripthtmlvue.jsvue-componentvue-router

The 'background-size:cover' property does not function properly on iPad devices

Greetings! I have been working on developing a parallax website, and everything seems to be running smoothly across all browsers except for iPad. It appears that the background-size: cover property is not functioning properly on this device. Below is the ...

htmlioscssipad