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

Button component in React JS fails to appear on iPhones

After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint ...

javascripthtmlcssreactjs

Adjust the content size to 100% based on the quantity of items in a row

I've been having a hard time creating an image gallery that adjusts its size automatically (width: 100%) based on the number of items it contains. For example, take a look at this gallery: http://codepen.io/anon/pen/eNMOEz .item { width: 75px; h ...

javascripthtmlcss

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

htmlcssslider

Guide on transferring a 200MB database to an HTML5 web page executed locally

In the process of creating a search tool for internal use within my organization, I have established a deployment strategy that involves: Storing an HTML5 web page on the file server. Keeping a 200MB JSON or JavaScript file in another location. Currentl ...

javascriptjqueryjsonhtml

Is it possible to generate this result using only Bootstrap 5.2.3?

I'm currently working on a simple HTML project that aims to replicate the layout shown in the image below. I want the output to look exactly like what's displayed in the provided image. The task does not require CSS, only Bootstrap is needed for ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-5

New Time-Series Charts with FusionTime: Leveraging MySQL for Dynamic Data Visualization

Being new to coding, I am seeking guidance on using Fusion Charts. I have successfully connected it to a MySQL database and displayed a chart as per tutorials. However, my goal is to create a time-series chart with FusionTime, which requires data in a Dat ...

javahtmlmysqlfusioncharts

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

htmlcss

Ensure that the logo/header remains fixed at the top of the page at all

Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Using a pseudo-element after to center CSS content

Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...

htmlcssangularjs

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

javascriptjquerycsshtml

Push Button Unleashes a Cascade of Buttons

After creating a dropdown button, I encountered an issue where replicating it multiple times resulted in all the buttons on the page opening simultaneously. I initially thought that wrapping the button in a class called "dropdown" would prevent this from h ...

htmlcssbootstrap-4

Taming col-auto in Bootstrap to prevent it from being overly insatiable

In this simplistic example below, I have implemented two columns using the col-auto class, allowing each column to take up the necessary space. .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; o ...

cssbootstrap-5bootstrap-grid

Word.js alternative for document files

I'm on the lookout for a JavaScript library that can handle Word Documents (.doc and .docx) like pdf.js. Any recommendations? UPDATE: Just discovered an intriguing library called DOCX.js, but I'm in search of something with a bit more sophistic ...

javascripthtmlcanvas

Enhancing User Interfaces with React and CSS Styling

I need to incorporate two unique React components on my webpage: Component1 and Component2. Code for Page1: <Component1/> <Component2/> While the individual components will have their own CSS files for styling, I also have a page1.css file f ...

cssreactjscss-modules

Setting the flex-direction for <td> elements: A helpful guide

This is a snippet from the render function of one of my components, showcasing a table: return ( ... <td> <div style={{ width: '100%' }}>50</div> {' '} <span clas ...

htmlreactjscssflexbox

Ways to conceal a division within the Repeater

Currently, I am developing a VB ASP.NET site using Visual Studio 2012 Express for Web. Within my project, there is a Repeater containing two div elements with the css classes .dnnFormLabel and .dnnFormItem. Here is a snippet of code from the Repeater: < ...

jqueryhtmlcssasp.netvb.net

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

csshtmlcss-selectorsmarkup

SVG's height attribute not adjusting properly

I am currently working on implementing an SVG sprite sheet using the "symbol" method outlined here. My HTML code is quite straightforward. <svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> Below is a sample symbol extracted ...

csssvgaspect-ratio