removing page scrollbars in IE8 (overflow:hidden not working)
It depends on whether IE8 is rendering the page in Standards or Quirks mode. For example, the following HTML will be displayed without a scrollbar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>
But if you remove the doctype declaration, IE8 renders the page in Quirks mode:
<html>
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>
You can also check this by forcing the rendering mode with the Developer Tools. Press F12 on a page, and at the end of the menu bar (for some reason...) there's a "Document Mode" setting. Toggling between Standards and Quirks here should also toggle the scrollbar.
So... you need to make your page adhere to an HTML standard! It need not be XHTML Strict, it could be HTML 4, or even XHTML Transitional if you really must.
The W3C Validator can help you with any validation errors.
Is there a way to hide the scrollbars in IE8?
You can use the CSS overflow property to hide the scrollbars:
html, body {
overflow: hidden;
}
Removing IE's scrollbar
See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.
Website not displaying scroll bar in IE 8 (Not overflow)
consider putting this in your CSS to force the vertical scrollbar:
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
Hide scroll bar, but while still being able to scroll
Just a test which is working fine.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
Working Fiddle
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
JavaScript Working Fiddle
Or
Using Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Working Fiddle
JavaScript Working Fiddle
Information:
Based on this answer, I created a simple scroll plugin.
How to disable default scroll bar for textareas in IE8?
I can't test on IE8 right now, but I can tell you that this works in IE6:
textarea {
overflow-y: auto;
}
iframe scrollbars not showing in IE8
I had to set the height on the page that is being displayed in the iframe.
It was tricky due to the fact that the page is actually a sharepoint webpart with everything being created dynamically in VB
Thanks for your answers.
Related Topics
Taghelpers Add Custom Class for Labeltaghelper Based on Validation Attribute [Required]
Set Background-Image to a Blob: Uri
How to Get Attribute Value Using Selenium and CSS
Why Is a Div with "Position: Absolute" Not by Default Relative to the Document
Use Images in CSS Files with Reactjs
How to Remove Bullets from Numbered Toctree in Restructured Text
Compass 1.0 Doesn't Use All Prefixes for Flexbox
How to Remove the Arrow in Dropdown in Bootstrap 4
What Is the Math Behind -Webkit-Perspective
How to Hide Only the First Element of a Type
How to Dynamically Load a CSS File into a Flex Application
CSS Drop-Down Menus Pushing Page Content Down
Generic @Mixin for SASS with Multiple and Varied Values
How to Detect Broken/Unloaded (Error) Images with CSS
Can You Float a Div in the Lower Right of Its Parent Div and Have Text Wrap Around It