CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Hey there, I've run into a bit of an issue with two divs containing tables - one acting as a header and the other as a scrollable content area.

Everything is working perfectly except for this mysterious border/margin that keeps appearing in Chrome on the scrollable section.

Here's how it looks in Firefox:

And here it is in Chrome:

You can see that Chrome shows a subtle margin/padding on the left side of the scrollable area (starting from where the "12a" time markers begin). Even though I tested by changing the background color of the scrollable area to #ff0000 to confirm that it's not a border, it still appears with the original style:

I thought about adding a simple margin-left to the element, but since the calendar cells are generated through JavaScript and their width depends on various factors like container size and number of available days to view, doing so would misalign cells on the right side of the table.

Has anyone come across this issue before? Is there a way to disable this property for scrollable elements in Chrome? Any assistance would be greatly appreciated.

Thanks in advance!

htmlcssgoogle-chrome

Answer №1

When calculating the total width of an element, keep in mind that borders and scroll-bars add to the overall dimensions. This may result in the appearance of the top box being shifted to the left due to the offset caused by the scroll-bar.

To adjust for this issue, consider offsetting the scroll bar container with

left: -2px;

or equivalent to the width of the scroll-bar itself.

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 methods can you use to locate the CSS selector within HTML that meets certain criteria?

Is it possible to parse a given link and find CSS selectors with attributes that partially or completely match a specific keyword? For example, if the keyword is "print," I want to identify all CSS selectors in the link containing "print" in their name, id ...

javascriptpythoncssparsinghtml-parsing

A pair of div elements within one section

Can you explain why the following HTML code uses two divs, one with a class and the other with an ID, instead of just using one of them to assign properties? .header { background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/ ...

htmlcss

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

pythonhtmlcssselenium

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

htmlcssvue.jsvisual-studio-code

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

I have created a multi-select checkbox form, and I've added some JavaScript to ensure that the visitor selects at least one option <div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option&l ...

javascriptphpjqueryhtml

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

Unable to precisely reach the very bottom of the scrollbar

When trying to move to the bottom of the scrollbar, I seem to reach a bit higher than the actual bottom. https://i.stack.imgur.com/Vt83t.png Here is my code: ws.onmessage = function (event) { var log = document.getElementById('log') ...

javascriptcss

Excessive text in HTML div element

Whenever I maximize the window in any browser, I type a long string in a div or span tag. It perfectly fits within the div tag. However, when I minimize or compress the browser width, the text spills out of the div area. I am looking for a solution to set ...

csshtml

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in because it returns a blank ...

htmlruby-on-railsrubycdata

Extract the text from an html element by utilizing xpath

This snippet contains HTML content <p class="ref Hover"> <b class="Hover Hover Hover Hover Hover">Manufacturer Part Number:</b> MC34063ADR2G<br> <b>Mounting Method:</b>&nbsp; Surface Mount& ...

htmlxmlxpathselenium-webdriverxml-parsing

Creating a unique blur effect on divs using HTML and CSS

Currently working on a website project and facing an issue where I need to apply Gaussian blur within a div. Although opacity can be adjusted, the challenge lies in blurring the text within the div. Seeking assistance for this matter <html> < ...

htmlcss

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Enhancing the appearance of the MUI DatePicker

I'm currently using a DatePicker component from Mui Lab and I'm attempting to customize the appearance of the Calendar component by incorporating some border or background color. Although I've tried utilizing the PaperProps prop for DatePick ...

cssreactjsmaterial-ui

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

Troubleshooting problem with displaying HTML content on Internet Explorer 10

My website was developed using jquery with a dynamic coding style. It was functioning properly in IE10 while working from Visual Studio. However, after deploying it to the production server, the entire style seemed broken in IE10. In all other versions o ...

htmlasp.netcssstylesinternet-explorer-10

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

The functionality of CSS scroll snap does not seem to be compatible with the CSS Grid

When utilizing CSS scroll snap with Flexbox, the snapping functionality works adequately: * { box-sizing: border-box; margin: 0; padding: 0; } .slider { font-family: sans-serif; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vw ...

htmlcsscss-grid

Navigate to the adjacent IDs

I have multiple sections with varying content and links (previous and next) to navigate to the next section. Initially, everything functions properly. However, when adding a new section in between existing ones, I am required to update all the ids to ensu ...

javascriptjqueryhtml

When you hover over the text, the color will shift

I have created two boxes that are blue with white text and change to a different color scheme when hovered over. However, I am experiencing an issue where the text color reverts back to the original color when hovering below the text area of the box. Here ...

htmlcss

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css