Having a peculiar margin problem in IE11 - potential connection between overflow and smooth scrolling

Lately, I've been facing a small issue with a website plenarto.github.io that has been bothering me for the past few days.

There is an odd white margin that mysteriously appears on the right side of the website whenever you access it using IE11. This margin runs from top to bottom throughout the entire site, and strangely, it cannot be targeted or bordered using developer tools like so:

* {
border: solid red 1px;
}

The presence of this white margin results in an additional horizontal scrollbar at the bottom of the page.

To eliminate this issue, adding overflow-x: hidden to the html and body tags seems to do the trick. However, this solution gives rise to another problem related to vertical scrolling (possibly linked to smooth scrolling). With overflow-x: hidden, IE users can't scroll through the site using a mouse wheel, and internal links stop working in Chrome.

I have been attempting to find a resolution to this conundrum for quite some time...

If anyone has insight into what might be causing this peculiar margin and how to remove it without resorting to overflow-x: hidden, your assistance would be greatly appreciated!

Thank you in advance for taking the time to help!

htmlcssoverflowmarginsmooth-scrolling

Answer №1

The issue you're experiencing is located within the #projects .main-container element. By including the style overflow: hidden in this div, the problem will be resolved. It's likely that the margin of one of the project items is causing overflow.

Answer №2

The issue lies within the elements found in the “Projects” section, specifically with the class project-container. The styling for this element is not being properly applied.

Consider using the following CSS code:

.project-container {
    display: inline-block;
    width: 33%;
    padding: 20px;
    box-sizing: border-box;
}

If you want to add a shadow effect, style the img element inside the div, rather than the div itself. Additionally, you may need to adjust the width for different media queries.

When applying padding, margin, border, or shadows to an element with a fixed width, it can cause the size to expand beyond the container. This can be avoided by using the display: inline-block and box-sizing: border-box properties.

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

Ways to allocate space evenly between components of the same size in React Native

As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface. To enhance my understanding ...

javascriptcssuser-interfacereact-nativeflexbox

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax

Suggestions for autocomplete in a textarea within an HTML element

<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/autocomplete/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> ...

javascriptjqueryhtml

Implementing JavaScript functionality upon page load with ASP.NET

I have come across a situation where I am trying to integrate working code (jQuery/Javascript) that makes an API call and sends data to it. The API service then responds with a success or failure message based on the data insertion into the API db. Everyth ...

javascriptjqueryhtmlasp.net

Transferring JSON data from Django for visualization on a D3 graph

I'm currently working on customizing a D3 bar graph found at http://bl.ocks.org/3885304 to accommodate JSON data from Django. In Django, I have a variable that holds JSON formatted data like this: [{"score": 1, "color": "blue"}, {"score": 5, "color": ...

javascripthtmldjangotemplatesd3.js

Insert data into a table without any formatting

I'm trying to enhance my table by adding inputs within the td tags, but I want them to appear as plain text cells. Below is the code snippet I have been working with: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ...

htmlcss

CSS3 Box Shadow Orientation

I'm new to CSS3, so I appreciate your patience. Here is the HTML code I am working with: <input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span> Here are the CSS styles applied to the "input" and "spa ...

webkitcss

"Discrepancy found between the local Jekyll serve and the final

I'm experiencing an issue with a discrepancy between my local Jekyll serve and the actual output of my website. In the first picture, the favicon is not displaying properly on the site. However, in the second picture from my local Jekyll serve, the ...

cssjekyllfavicon

Is there an advantage to using the col class only on div elements in the latest version of bootstrap v4, as opposed to using it on other types of elements? And conversely, is there

Is there a specific best practice for using certain elements in Bootstrap, or can we use any element with no limits? I have noticed some teammates utilizing span or h1 with the class name of col-md-1, but there doesn't seem to be a clear guideline on ...

htmlcsstwitter-bootstrapbootstrap-4

New SCSS feature: Enhancing Node-sass with an updated image-width function inspired by Compass

I'm currently in the process of migrating an old web project that previously used Compass for SCSS compilation to now use node-sass, as Compass relies on Ruby and hasn't been updated in several years. Within one of the SCSS files, there are refe ...

cssnpmsasscompassnode-sass

Angular2 poses a strange problem with ngClass

It seems like Angular is expecting me to use single quotes for the class names even if there are no hyphens in my CSS class name. I've tried everything but Angular keeps insisting on using hyphens for this specific CSS class... it's strange, or m ...

cssangularangular2-template

Encountering a console error during the migration of a Vue App with VueRouter

I am currently in the process of integrating a standalone Vue application into a larger Java Spring web project. The Vue app relies on Vue router as a dependency. However, when attempting to load the main page, I encountered an error in the browser console ...

javascriptjavahtmlvue.jsvuejs2

Attempting to align CSS with JavaScript for seamless integration

Seeking guidance on how to convert CSS from a stylesheet into inline styles directly within an HTML document using JavaScript. The search results I've found so far have been somewhat irrelevant to what I'm looking for. To clarify, I am looking f ...

javascripthtmlcss

Identification of absence of file selected in input file control

Imagine a scenario where I need to select an image to display on the screen from a select control. If the desired image is not available, I want to be able to choose it from the disk and add this option to the select control while automatically selecting i ...

javascriptjqueryhtml

modify data when parsing a file / utilizing loops in shell scripts

I have a log file that has the following format, <tr><td>AAA-application-01 <br> Quality_gate_failed_reason:xxxxxxx </td></tr> <tr><td>AAA-application-02 <br> Quality_gate_failed_reason:xxxxxxx </td>&l ...

htmllinuxbashloopsshell

Unable to style Backbone View with CSS

Recently started diving into the world of Backbone, and it seems like I might be missing a key concept here. In my View object, there's a snippet of code that's puzzling me... First off, I can't figure out why the CSS change in the highli ...

javascriptcssbackbone.jsbackbone-views

Changing the alignment of checkboxes in HTML: a step-by-step guide

I'm encountering an obstacle when trying to adjust the alignment of checkboxes in my HTML code. Here is the structure of my HTML: <ol id="menutree"> <li> <label class="menu_label" for="c1">Menu Gen14 Am0a1</label> ...

javascriptjquerycsshtml

Struggle between Internet Explorer 8 and its border and margin problems

Having a trouble with styling on our company's intranet specifically in IE8 or lower. The border and padding are showing up despite using border:none;, margin:0!important;, and padding:0!important;. This is causing the content to shift to the right an ...

htmlcssiframeinternet-explorer-8

Attempting to submit a form containing multiple fields that share the same name as an array

I am attempting to submit a form with fields that function as entries in a table For clarity, here is an example: <form method="post"> <table> <tr> <td><label>Name:</label></td> ...

phphtmlpost

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo