CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element.

Here's a visual representation of the problem:

The green right border's bottom is appearing distorted due to the presence of the gray border at the bottom. How can this be rectified?

This is the current CSS styling being used:

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active{
    color: #CACDD0;
    border-right: 6px solid #2CC588;
    width: 199px;

}

Edit: Also, provided a jsFiddle link for reference: http://jsfiddle.net/wu958/

htmlcss

Answer №1

Do you think the <li> items will contain a link with an <a> tag?

You may want to consider applying a right border to the <a> tags within the elements, like this:

HTML

<li class="active"><a href="#">Banners</a></li>

CSS

.side-menu li a {
    padding: 7px;
    display: block;
}
.side-menu li.active a {
    border-right: 6px solid #2CC588;
}

Check out this JsFiddle for a clearer example.

Answer №2

Check out this new code snippet:

.navigation-menu{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
.navigation-menu li{
    list-style-type: none;
    margin-right: 15px;
}
.navigation-menu li.active {
    color: #333333;
    border-bottom: 2px solid #2CC588;
}

I made some adjustments to the width and styling of the navigation menu items, specifically targeting the "li.active" class.

Answer №3

To solve issues like this, you can utilize the ::after pseudo-element:

.side-menu li{
    line-height: 35px;
    padding-left: 18px !important;
    width: 210px;
    color: #37434f;
}
.side-menu li::after {
    content: ' ';
    display: block; 
    border-bottom: 1px solid #E6E7E9;    
}

Check out the updated JSFiddle here

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

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

javascriptjqueryhtmlnode.js

Try implementing a body template when using the mailto function

Is there a way to customize an HTML template for the mailto() function body? For example, suppose I have the following link: echo "<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f2faf6fefbd7f0faf6fefbb ...

htmlmailto

What is the best way to adjust the width of a column grid header in extjs

When adjusting the width of a vertical header in a grid to 50px, the header text disappears unless manually dragged to the left. How can I ensure the header text remains visible even with a smaller header size? Consider the following code snippet: { text ...

cssextjssassextjs5

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

I'm attempting to design a filter dropdown feature where only the label of the dropdown is visible at first, and then upon clicking the label, a list of options will drop down over the top of the remaining content using absolute positioning. The chall ...

htmlcss

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

javascriptjqueryhtmlcss

CSS Vertical Accordion Menu

I am struggling to modify the vertical accordion menu CSS. I am having difficulty adjusting the sub-menu list items. <div id="menuleft"> <div class="top">header</div> <ul> <li><a href="#">Main 1</a> ...

jquerycssmenusubmenu

What is the best way to utilize Rselenium's findElement() function in order to target an xpath based on its text content

Despite researching similar questions on stack overflow, I have not been able to make my code work. Here is the initial code I am working with: library(RSelenium) library(rvest) remote_driver <- RSelenium::remoteDriver( remoteServerAddr = "local ...

htmlrseleniumxpathrselenium

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

Switching the visibility of multiple textareas from block to none

I am currently exploring ways to make one text area disappear while another one appears in its place. With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the rig ...

javascripthtmlcss

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Looking to enhance the style of the Download button as it appears too formal. Seeking assistance in adding some button styles to make it more stylish. The code is correct, just aiming to give the Download button a trendy look with specified styles. ...

javascripthtmlcss

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I check i ...

javascriptjqueryhtmlcss

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

javascriptjqueryhtmlcss

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

css optimizing image content for search engine visibility

My website's main page features a div with an image containing the message "contact us by calling 1 800 blabla..". I'm concerned that search engines may not be able to recognize or find my company's phone number since it is only displayed wi ...

cssimagehtmlsearch-engineinformation-retrieval

Leveraging the power of CSS calc() in combination with TailwindCSS styles and JavaScript

Can you explain why applying styles with TailwindCSS v3 to calculations using JS variables does not work? I'm working on a project using VueJS, and I've noticed that styling works fine when using calc as a string like this: ... <div class=&qu ...

cssvue.jstailwind-csstailwind-uitailwind-in-js

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox