Ie7 CSS Scrolling Div Bug

IE7 CSS Scrolling Div Bug

The easiest fix would be to add position: relative; to the outer div. This will make IE7 work as intended.

(See: http://rowanw.com/bugs/overflow_relative.htm).

EDIT: Cache version of the broken link on waybackmachine.org

IE7 Div Bug overflow:auto

I can't understand why, but removing white-space: normal; from .Chart_Small fixes this bug for me. Can you check if it works for you?

Fix IE7 div overflow-y: scroll from hiding contents behind the scrollbar

Since this problem only seems to occur in IE7, I decided to detect the userAgent per ihake's suggestion and proceed accordingly. It's not ideal, but it works.

var IE7 = false;

$(document).ready(function(){

if($.browser.msie) {
var userAgent = $.browser.version;
if(userAgent.substring(0,userAgent.indexOf('.')) == 7) IE7 = true;
}

...

Farther down in the file I set the css one way if IE7 is true and another way if it is false. Pretty simple.

IE7 Scrollbar doesn't work

I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:

#content_box  {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;

this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).

I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)

Horizontal scroll bar problem in IE7 + IE8

You have used relative positioning in situations where it was really not necessary or appropriate. In the process you set some very odd measurements to get the layout you wanted. The fix mainly involves removing a lot of your relative positioning styling.

If you replace the three rules I have given you below it should fix your problem.

.rightmenu .leftCol {
margin-top: -61px;
float: left;
width: 100%;
}
.rightmenu .col1wrap {
float: left;
padding-bottom: 1em;
width: 50%;
}
.rightmenu .col2 {
border-left: 1px solid #C1C1C1;
min-height: 1000px;
padding-left: 7px;
width: 212px;
float: right;
}

I noticed you had duplicated a few of the rules above in another style sheet. You should completely remove those duplicate rules and only use the three above to ensure there are no conflicts.

Horizontal scrollbar appears only in IE7 even with overflow:hidden being set

This does seem odd. I am assuming you don't mind if the page is not horizontally scrollable even on small screens, since you have tried to use:

body{overflow-x: hidden;}

In which case if you apply it to html rather than body it should do the trick:

html{overflow-x: hidden;}

I wouldn't really want to implement this long term, but if you are looking for a quick fix this should be ok as a temporary measure until you can work out what is going wrong. I would also put it in a conditional comment so as not to ruin the experience for the majority of people on modern browsers.

<!--[if IE 7]>
Link to alternate style sheet
OR
<style> /*CSS in here*/ </style>
<![endif]-->

EDIT : I have found the cause of the issue, so there is no need to use the above workaround. As I had suspected the issue was related to absolute and relative positioning.

You just need to remove position:relative from .grid_2 and .grid_12 and the scrollbar will disappear.

IE7/IE8 in Compatibility mode DIV with overflow problem

We've solved the mystery.

If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.

On the LI element in the page level CSS, I removed the following style attributes

li
{
margin-bottom: 10px;
position: relative;
left: 10px;
width: 500px;
}

And replaced them with:

li
{
margin: 0px 0px 10px 25px;
}

On the OL element in the page level CSS, the width attribute was moved.

ol 
{
padding-left: 10px;
width: 500px;
}

And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.

IE7 + JavaScript appendChild = Scrollbar bug

You've run into the IE7 scrolling div bug.

Remove position: relative from ul.selectReplacement and everything works. Already tested in jsfiddle in IE9's IE7 Browser Mode.

If you find that you need the position: relative on the ul elements, attach position: relative to the containing div (div.scroll)and that also fixes things (relevant jsfiddle). Just striping position relative didn't seem to break anything in either chrome or IE7 mode, but if you need the ul elements to not use the static model and don't need the div to use the static, the second method works fine too in both cases.

As to the second question, you can position: relative the div.scroll and then wrap it in a height: 1.5em div as seen in this jsfiddle. The wrapping div can have positioning and z-indexing added to it as needed: note that if you need interior elements to appear higher than other siblings to the wrapper div, you will need z-indexing on the wrapper due to an IE bug relating to z-indexing on child elements versus elements sibling to an ancestor. Works in IE7 mode and in chrome.

(Note that if you want to have this be an inline element, you can display: inline-block it with the usual caveats--appropriate jsfiddle here and IE7 fix hack with zoom and *display:inline version here)

Edit:
Inline version with fix for text below by having the div switch between two different heights: jsfiddle. Note that this will require some playing with the heights/line heights of the ul and li elements to avoid slight displacements in height from open to close, but the basic concept is there, albeit in an inelegant way ("better" would be to simply change the div's height attribute, or isolate the height in an additional class and only swap that class). Note that the selected element height had to be reduced and padding removed to be able to compress the div down to essentially a single line height. Reducing heights on certain elements further will allow further compression of the scroll div without ending up with scrollbars even in the closed state, if needed.

Ie7 Redraw bug when i am scrolling the page

I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7).

Please include more info or a reproducible example and I'd be happy to help.

EDIT:

It seems that when then mouse enters the page after scrolling, it redraws the button. Based on my browsing experience, it is hard to notice. I suggest to force it to redraw the button when it becomes visible.

This small jQuery method will handle that, although further optimizations can be made. Please test it and leave a comment if it needs adjustments.

$('#my-button').RedrawWhenVisible();

$.fn.RedrawWhenVisible = function()
{

$(window).scroll(function() {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = this.offset().top;
var elemBottom = elemTop + this.height();

// If element is partially visible...
if((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom)) {
//Redraw it, just once.
if(this.attr('data-redraw')) {
this.hide().show();
// Prevent further draws.
this.removeAttr('data-redraw');
}
} else {
// The element is not visible...
if(!this.attr('data-redraw')) {
// Flag it to redaw on scroll.
this.attr('data-redraw','redraw');
}
}
}
}

EDIT 2:

Since the other button is fine, I bet it's a very specific CSS issue. Double check all of the attributes for those CSS classes, the grey button is fine so check how that button differs from the Orange/Yellow one.



Related Topics



Leave a reply



Submit