Unable to modify border-spacing in the default User Agent stylesheet

I am encountering an issue where I am unable to override the border-spacing in the User Agent style sheet within Chrome. Currently, it is set to 2px, but I am trying to change it to 0px. Despite successfully overriding the border-collapse property, the border-spacing remains unchanged.

I have attempted to make adjustments using both -webkit-border-horizontal-spacing and -webkit-border-vertical-spacing, however, these changes were also ineffective.

Below is a snippet of my HTML document:

<!DOCTYPE html>
<html>
  <head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
  <table border="0" cellspacing="0" cellpadding="0">
      <tbody>
         <tr>
             <td><img src="iron-helmet.png"></td>
             <td><img src="gold-helmet.png"></td>
             <td><img src="diamond-helmet.png"></td>
         </tr>
      </tbody>
  </table>  
</html>

Additionally, here is an excerpt from my inventorystyle.css file:

table {
    border-collapse: collapse;
    border-spacing: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}

Answer №1

I was going crazy over this!

Maybe try including the css img {display:block;}

That did the trick for me.

Answer №2

It appears that there is a minor issue with how Google Chrome displays CSS rules within its Developer Tools. Despite this, the border-spacing property functions correctly within Chrome.

Upon inspecting the table element, you will notice that the border-spacing information is accurately displayed. The discrepancy arises when examining inner elements like td, where the Developer Tools may provide misleading information. According to the border-spacing specification, this property does not apply to such elements and thus holds no significance for them. Even in the "Computed" tab, you will observe that border-spacing is absent from the list of computed styles, including inherited properties.

In the given scenario, setting a value for border-spacing on the table element has little impact due to two reasons: a) the usage of collapsing border model and b) presence of the cellspacing="0" attribute in the HTML markup, which overrides any default border-spacing value unless explicitly customized via CSS.

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

Display the dropdown submenu within the DIV upon hovering

Looking to create a hover/drop menu using DIVs without UL/LI elements. The current menu displays 3 options, but I want to add a submenu under Link 2. .dropbtn { background-color: #4CAF50; color: white; pad ...

What is the best way to show only a section of a background in CSS?

Being a novice in HTML and CSS, I am facing the challenge of displaying an image as a banner with text overlay. Despite trying various methods, it seems impossible to achieve this directly with an image element, so I resorted to using CSS's background ...

CSS style for centering double digit list items

My query is: <ul id="list"> <li> <a href=''>1</a> </li> <li> <a href=''>2</a> </li> <li> <a href=''>3</a> </li> <l ...

What steps do I need to take in order to create a 3D viewer utilizing a Spritesheet

While browsing online, I stumbled upon a Wiki dedicated to the game Team Fortress 2. Initially, it seemed like a typical gaming Wiki, but there was one particular feature that captured my attention and left me completely perplexed. This Wiki showcased all ...

Struggling to apply size in percentage to several images used as a background

Displaying two background images with different positioning: html { background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_Red_Fox_Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Rive ...

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

Text starting to overflow in HTML line before being hidden by right-aligned content

Text is confined to a fixed-width container with hidden overflow. Three status icons may appear on the right side of the container, and I want to prevent text from flowing under these icons without using JavaScript. How can I achieve this with CSS? Below ...

Adjust the overflow to automatically decrease at regular intervals

Is there a way to make the scroll automatically move down a bit every few seconds, revealing more text in the process? Here's an example of how I want it to work: http://jsfiddle.net/Bnfkv/2/ ...

Difficulty with Jquery's random selection of grid divs

I am working on a grid layout consisting of 9 divs nested in columns of three. The objective is that when the main grid (with ID #left) is clicked, two divs from the middle row (row="1") should have the class .show randomly applied to them. In the column w ...

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

Step by step guide on creating a CSS triangle shape in front of a span element

Can you help me troubleshoot why my css triangle isn't displaying before my span? I've tried everything but it just won't show up. .triangle:before { width: 0; height: 0; border-top: 3px solid transparent; border-right: 6px solid ...

Creating a dynamic matrix layout with CSS

On my e-commerce site's product display page, I am facing some alignment issues. There will be around 100 products on this page and I want to display them in a matrix format. <div style=" margin: 0 auto; width:640px; text-align: left"> &l ...

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

Attempting to connect CSS to an HTML document within a Django development project

Directories Here is a photo of my directories. I am currently trying to utilize sudokuStyle.css in sudoku_board.html, but for some reason it does not appear to be linking properly in my HTML file. Below is the code snippet from my head section: {% load st ...

Unusual floating div phenomenon

I am encountering an issue while attempting to generate a UL list that includes images and descriptions. When there are 5 items in the list, everything looks good, but as soon as the 6th item is added, it floats to the right, and the 7th item falls down an ...

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

Uncovering intricate CSS selector techniques

I need help with filling text in a Selenium Firefox browser. I am struggling to find the selector for entering text and it seems very complex for me. Please explain the only way I can achieve this using only CSS selectors. <div class="Gb WK"> < ...

Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

In my project, I am using Vue 3 along with Tailwind CSS and Headless UI. The challenge I am facing is making the sidebar navigation scrollable while ensuring that the pop-up menu appears outside the sidebar. As the number of menu items in the sidebar will ...