What could be causing the disappearance of the border around this `<li>` element?

I am currently redesigning the Kotaku website and facing difficulties in creating a list for the footer. Below is an image illustrating my issue.

The 'Popular tags' section has been created using the <ul> and <li> elements, with an <a> link inside each list item. The right-border of 1px is applied to these list items to create dividers, but the last item on the line (highlighted in red) does not have this divider as expected. This occurs whenever an item reaches the end of a line before shifting to the next one, causing the border to disappear when resizing the window. I am struggling to replicate this behavior.

I'm unsure how to provide the CSS code related to this specifically, considering that the Devtools display about 103 lines just for the styling of the <a> tag. However, I did notice that removing the 'display:inline-block' property from the <a> tag inside the list item resolves the missing border, although I do not understand why this happens.

Could someone please examine the Kotaku page and explain how this effect is achieved? I realize this is quite a request, but I can't seem to find any resources online addressing this issue. This is my final attempt before resorting to a temporary workaround.

Thank you.

Kotaku website footer, highlighting the missing border in red circle

https://i.sstatic.net/vUZhN.jpg

This question has been rephrased for better clarity

htmlcss

Answer №1

After creating a standalone example, I finally achieved the desired outcome. Surprisingly, I couldn't figure out why it worked initially and struggled to find helpful resources online due to my inadequate explanation.

Further testing revealed that the root of the issue was whitespace in the HTML code. Initially, my code looked like this:

<li><a href="#">Item</a></li>

This formatting led to borders being applied to the last items in a line, which made perfect sense to me and aligned with my expectations. However, upon comparing it to the Kotaku website - which had identical styles - I realized something was amiss.

The correct way to write the code should have been:

<li>
 <a href="#">Item</a>
</li>

Although I still don't completely grasp the concept of whitespace, addressing this issue ultimately resolved my problem. Here's the revised code snippet that now works for me:

#container {
  max-width: 970px;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  background-color: grey;
}

#ul {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.list-item {
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
  border-width: 0px 1px 0px 0px;
  border-color: white;
  border-style: solid;
  position: relative;
  margin-top: 20px;
}

.list-item:last-child {
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
  border-width: 0px 0px 0px 0px;
  border-color: white;
  border-style: solid;
  position: relative;
  margin-top: 20px;
}

.link {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 20px;
}
<div id="container">
  <ul id="ul">
    <li class="list-item">
      <a href="#" class="link">Item 1</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 2</a>
    </li>
    ...
   <li class="list-item">
      <a href="#" class="link">Item 22</a>
    </li>


  </ul>


</div>

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

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

javascriptcssanimationfirefoxdom-events

What mechanisms does Vue employ to halt the browser from sending a server request when the URL in the address bar is modified?

When a link <a href='www.xxx.com'> is clicked in a traditional HTML page, the page is redirected to the new page. In a Vue application, we utilize the Router. See the code snippet below. Vue.use(Router); export default new Router({ mode ...

javascripthtmlvue.js

Is there a way to utilize jQuery to navigate through multiple DIVs within a slide bar?

As a beginner in jQuery, I am facing the challenge of placing more than one div in a single slide bar. Specifically, I am developing an auction site and I need a DIV that can display multiple items within the same div, accompanied by "Next" and "Previous" ...

javascriptjqueryhtmlcss

Optimizing Title Tags for Static Pages with Header Inclusion

Working on developing static web pages for a client who preferred not to use a content management system. These pages all have a shared header and footer php files. I am in need of creating unique title and meta description tags for each page, but I am un ...

phphtml

Conquering Bootstrap 3's Image Gallery Customizations

I am currently working with Bootstrap 3 RC1 and struggling to set up the image gallery properly. Issue 1 - The ul is adding unnecessary padding-left or margin-left. What do I need to do to eliminate this? Issue 2 - Each li is extending across the contain ...

htmltwitter-bootstrap-3

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Ways to place the footer in the middle of 2 divs?

Hey there! I'm currently experimenting with creating a 3 column layout and running into an issue with the footer placement. I want the footer to go between the two sidebars at the bottom, but my middle column isn't extending all the way down like ...

htmlcss

What is the best choice for my CSS: creating a block or an element using BEM methodology

** According to the official BEM website ** Create a block: If a section of code can be reused and does not rely on other page components being implemented. Create an element: If a section of code cannot be used separately without the parent entity (the ...

htmlcssnamingbemmethodology

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

cssdjango

Error Message: ESP32 Guru Meditation Error - Core 1 in a State of Panic due to Load Prohibition

I recently attempted to set up a web server to control multiple LEDs using an ESP32. Initially, I had success with just one LED and button on the HTML page. The code worked fine, but I decided to expand it to include more buttons and variables. However, af ...

htmlc++error-handlingarduinoesp32

Can WebGL be configured to render offscreen without its canvas being directly connected to the DOM?

Searching for an answer to what I believed would be a simple question has proven to be quite challenging. My goal is to utilize WebGL for image processing and generation tasks, with the intention of working offscreen. Specifically, I aim for WebGL to rende ...

javascripthtmlhtml5-canvaswebgl

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

pythonhtmlcsspandas

matching patterns within HTML div elements

Within my Notepad++ text editor, I am attempting to remove all spaces within a div tag except for those between the comma and the last name. This is what the input looks like: <div class="n"> Joe , Williams </div> And this is the desire ...

htmlregexnotepad++

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

Arrangement of columns with a fluid design

Looking to display checkboxes in a table format, but the number of columns should adapt based on the screen width. Allowing them to arrange themselves results in a layout like this: +-----------------------------------------------------+ | ...

htmlcss

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option

I'm currently facing an issue with a section of my form. I can't seem to figure out what's causing the problem, so I've decided to reach out here for some guidance. The code I've written aims to determine both the gender and sexua ...

phpmysqlhtml

Showcasing an array of images on a Jupyter notebook layout

Looking for some assistance with displaying a dataframe in Jupyter notebook that contains 495 rows of URLs as a grid of images. Here is the first row of the dataframe: id latitude longitude owner title ...

pythonhtmlmatplotlibjupyter-notebook

Tips for using unique fonts in email text display

As I was editing a Mailer template in core php, I found myself wanting to set a custom font for the text displayed in the mail template similar to how we do it for websites using CSS and imported fonts. Below is the code snippet that I have been using: & ...

cssuser-interfacefontsgmailmailer

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap