Issue with IE/Edge: Scrollbar covering content

I am trying to achieve a layout with a horizontal scrollbar on the root container and vertical scrollbars on sub-containers while preventing any overlapping of content. This setup needs to be compatible with IE, Edge, Chrome, and FF (latest versions).

<rootcontainer> => horizontal scroll
 <subcontainer1> => vertical scroll
  <data></data>
 </subcontainer1>
 <subcontainer2> => vertical scroll
   <data></data>
 </subcontainer2>
</rootcontainer>

Chrome and FF display the scroll correctly, but in IE11 and Edge, the root container's scroll overlaps with the sub-container content.

Note: Each subcontainer should have a width equal to 50% of the subcontainer.

I have provided a fiddle to showcase the issue.

What might I have missed in setting this up?

EDIT :

Windows 10 Edge https://i.sstatic.net/hpoUs.png

Windows 10 IE https://i.sstatic.net/N6qHc.png

Please note that borders are not visible in IE11, and the bug is more pronounced in Edge.

cssinternet-explorercross-browser

Answer №1

Are you currently using a version of Windows that is 8 or higher? Could you please provide a screenshot of the issue you are experiencing?

(I personally use Internet Explorer 11 on Windows 7 and have not encountered this problem)

It appears there may be an issue (or perhaps it's a design feature, depending on one's perspective) with Internet Explorer 10 or later on Windows 8 or higher, where the scrollbar overlaps the content. You can try the following solution and let me know if it resolves your problem.

.document,
.meta,
.viewer,
.other-doc {
    -ms-overflow-style: scrollbar;
}

For more information, you can visit

Answer №3

I implemented media queries for IE and Edge based on input from itodd, although I'm not entirely fond of this approach.

For IE 11 : How to target only IE (any version) within a stylesheet? (Edge Hack does not work)

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
  .document { padding-bottom: 17px; } 
}

Regarding Edge : How to target Microsoft Edge with CSS?

@supports (-ms-ime-align: auto) { 
  .document { padding-bottom: 12px; } 
}

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 is the best way to align an element in the middle of a div when there is another element in

I am trying to center an element within a div while another element is positioned nearby. Using text-align: center gets the element close to where I want it, but not exactly due to the presence of another element. My goal is to have the logo element center ...

htmlcss

Social Engine is incapable of analyzing the HTML code

Currently working on a website using Social Engine 4.8.9 version that is still in development mode. Upon inspecting the html code with the chrome inspector, I find it incredibly complex to decipher. For instance, when I click on the login page link http:// ...

phphtmlcsssocial-networkingsocialengine

jQuery: Retrieve the height of a concealed element using jQuery

Is there a more efficient way to retrieve the height of an element within a hidden div without having to show it first? Currently, I am showing the div, getting the height, and then hiding the parent div, which seems tedious. I'm working with jQuery ...

javascriptjqueryhtmlcss

What is the best way to display lengthy content using a pair of HTML tags?

I am facing an issue with my Angular4 app where I have a <md-card-content> tag on part of my page. Inside this tag, I am trying to display some content within a <p> tag which has a maximum height of 20cm. While this setup works fine for short ...

htmlcssangularmd-card

Challenge with arranging images in Bootstrap grid gallery

I am currently working on constructing an image grid using Bootstrap, but I am facing some challenges in understanding how to write the code. You can find the final example here: https://i.sstatic.net/aDcIs.jpg Below is my current code: .border { borde ...

htmlcsstwitter-bootstrap

Align your text box perfectly with Bootstrap Glyphicons

https://i.sstatic.net/G2qVu.pngI am struggling with incorporating a glyphicon next to my text box in the following HTML code: <div class="row"> <div class="col-md-6"> <div class="form-group"> <asp:Label runat="server ...

cssasp.nettwitter-bootstraptwitter-bootstrap-3webforms

Switch the glyphicon based on the open/closed state of the collapsible element - Bootstrap

Is there a way to update the glyphicon based on whether or not a collapsible element is open? This is the code I currently have: <div class="jumbotron ref" data-toggle="collapse" data-target="#collapse"> <div class="row"> <div class=" ...

javascripthtmlcssbootstrap-4

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page. <!doctype html> <html> <h ...

javascripthtmlcssloopsfor-loop

Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

HTML Section <div class="features-section"> <div class="container"> <div class="row"> <div class="feat-heading text-center"> <h3>Features</h3> ...

jqueryhtmlimagecsshover

Align two images to the center while displaying them in individual rows

<div class="client-logo-wrapper"> <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a> <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contr ...

htmlcsssass

Creating a 5px wide bold horizontal line in CSS3

I experimented with the below CSS3 code to create a 5px wide horizontal line: <hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" /> Unfortunately, instead of a line, I ended up with a 5px wide red rectangle. ...

css

Steps to position the dropdown scrollbar to the top every time it is opened

I am working with a unique drag-and-drop multi-select dropdown that only has a unique control ID. The issue I am facing is that when the dropdown is initially opened, the scroll bar is at the top. However, after scrolling down and closing the dropdown, the ...

javascripthtmljquerycssangularjs

Using a Bootstrap 4 modal within a child component in Angular version 6

Encountering an issue while working with the Angular 6 + Bootstrap 4 combination - the modal opens up behind the modal-backdrop. Oddly enough, this is the only modal in the project that behaves this way. Libraries imported in Angular.json file: "styles": ...

htmlcssangularbootstrap-4bootstrap-modal

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

htmlcssoutlookhtml-email

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...

csspseudo-element

smoothly slides into view and playfully bounces

http://jsfiddle.net/E6cUF/ The concept involves a grey box sliding left from behind a green box after the page is fully loaded, with a slight bouncing effect if possible. Update: I created a new version inspired by modifications made by others on the jsf ...

javascriptjqueryhtmlcssslide

Restricting zooming to only occur within the img element in a UI

Is there a method to enable image zoom inside specific divs without affecting the overall page zoom? At the moment, I have: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale ...

javascripthtmlioscssuiwebview

Creating three cards with identical height using Bootstrap and flexbox techniques

I am struggling to align 3 blocks in height and keep the yellow block fixed at the bottom of its parent container. After trying different solutions, this is the outcome I have: https://i.sstatic.net/QOHsV.png The yellow block is not positioned correctly ...

cssbootstrap-4flexbox

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

htmlcssfontsicons

The Jquery function for selecting a div added by an Ajax call is not functioning properly, but it works fine without the need for an

I have a unique checkbox that I created using an Ajax call. The issue I'm facing is that the jQuery to select the checked input in the second div #test_checkbox_ajax isn't working, while it works perfectly fine in the first div #test_checkbox. Cr ...

jqueryhtmlcssajax