Ie8 Horizontal Scrollbar Problem

IE8 horizontal scrollbar problem

Setting the display:inline-block; for the div that contains the red box

 <div style="display: table;">
<div style="display: table-cell;">
    <div style="overflow-y: scroll; height: 19em; display:inline-block;">
        <div style="width: 30em; height: 30em; background-color: red;"></div>
    </div>
</div>

general container - IE8 horizontal scrollbar problem

Floating will probably get the result you're looking for. Check out my example here:

http://jsbin.com/ivegi4/4/edit

I took away the containing divs, as I didn't think they were necessary, but I wouldn't see a problem adding them back in if you absolutely needed them.

Horizontal scrollbar very big in ie7 and ie8

From your comment i understand now that you meant the horizontal scrollbar, just add this to your CSS to hide it:

html {
    overflow-x: hidden;
}

There is some renegade element that is creating that extra few pixels of horizontal space that needs to be checked, but i think it is ok to just hide it, since your design is top-bottom.

horizontal scroll bar not moving the content inside the page in IE 8

I got similar problem in IE6.Adding "position:relative" in div's style solved it.

Unwanted horizontal browser scroll bar displayed using IE8

Managed to work out what was happening with the scroll bars.

The code in our BrowserScrollHelper that we were using to communicate the silverlight control's size back to the browser was using this code:

     double clientWidth = BrowserScreenInformation.ClientWidth;
     double clientHeight = BrowserScreenInformation.ClientHeight;

     double width = Math.Max( clientWidth, this.MinWidth );
     double height = Math.Max( clientHeight, this.MinHeight );

     htmlElement.SetStyleAttribute( "height", height.ToString( ) );
     htmlElement.SetStyleAttribute( "width", width.ToString( ) );

While this code snippet looks OK on the surface it was only doing part of the job. The key was in realising that setting the height may affect the width and vice-versa, and we were only running through this code once on application startup.

The resolution was to follow the pattern of either:

Set Height, Set Width, Set Height

OR

Set Width, Set Height, Set Width

This ensured that a single pass through the code would correctly communicate the silverlight control's size back to the browser giving it a chance to get the vertical and horizontal scroll bars correct.

The working code looks like this:

     double clientHeight = BrowserScreenInformation.ClientHeight;
     double height = Math.Max( clientHeight, this.MinHeight );
     htmlElement.SetStyleAttribute( "height", height.ToString( ) );

     double clientWidth = BrowserScreenInformation.ClientWidth;
     double width = Math.Max( clientWidth, this.MinWidth );
     htmlElement.SetStyleAttribute( "width", width.ToString( ) );

     clientHeight = BrowserScreenInformation.ClientHeight;
     height = Math.Max( clientHeight, this.MinHeight );
     htmlElement.SetStyleAttribute( "height", height.ToString( ) );

In our case the end user is mostly likely to launch the browser maximised and leave it in that configuration for the entire session and not perform any resizing of the browser window.

Forcing a horizontal scrollbar in IE8

Perhaps overflow-x : scroll;?

---

Related Topics