Because a customer requested it, I've changed a div to
position: absolute;
top: 5px;
bottom: 5px;
overflow: auto;
min-width: 945px;
which basically works fine in all supported browsers (IE7, IE8, Firefox 3+): It makes the div fill out the available area vertically, and show a vertical scrollbar if it doesn't fit. Note that without the min-width of 945px, the scrollbar would overlay a part of the content, since the content is not resized properly when the scrollbar is added in all Internet Explorer versions. With the min-width, it happens to fit, and other browsers don't care.
However, on IE7, if a vertical scrollbar is displayed and then the browser window is extended vertically so that the scrollbar is no longer needed, IE7 removes the scrollbar, but leaves a blank rectangle where the scrollbar was, i.e. the div content is not extended to the former scrollbar area. When reloading the page in the same window, it's fine. IE8 does not show this problem in standards mode.
How can I solve this?
it sounds to me like there is a bug in ie7 or your ie7 specifically. as for your code, its fine, although a little odd, do you want the div to horizontally scroll?
This is still an observed issue in IE7 and below (and of course, IE8 Compatibility View and the related modes).
After doing research, I think it's an oversight. In IE7 and below, overflow:auto always showed scrollbars, disabling them if they're not needed (for elements that "usually" have scrollbars). It appears that this behavior lead overflow:auto elements to not recalculate their width after scrollbars disappear (as they were never intended to disappear).
Related
I saw online that there were a couple of bugs related to position: fixed and Mobile Safari but I could'nt find any solution to my problem so far.
I have a div with overflow: auto and inside I have a position: fixed element. On desktop, Android, Chrome and Firefox, it works great but when I try to do the same on Safari on an IPhone, the behaviour is completely different and my app is not working.
The position: fixed element is a popup and I want it to take the whole page. Technically in safari it does take the whole page but I can only see part of my popup that is directly over the overflow: auto element. Everything outside the div is transparent. I say technically because the whole popup is still on top of everything but I cannot see it. I can still interact with it though.
I tried to use position: absolute but i my case it's not a viable option since the first element is inside another position relative ou absolute element and it's not goind to do the same thing.
The only option that a can see is to alter the overflow value when the popup is displayed and change it back when I close it.
Is there anything that I missed?
So this is about AngularJs and the uib datepicker.
This bug doesn't appear in Chrome and Firefox. But only in IE (tested in IE11).
The calendar is in a div that has width: 100%;.
When I go to the view with the calendar, it covers 100% of the div.
But as soon as I click on a date, it becomes half in width.
I tried to add the !important directive, but didn't make any difference.
Unfortunately I cannot access developer tools (security reasons at the office) so I cannot see what is happening. But it looks like the div and its width shrinks to the half.
Anybody recognizes this bug?
It turns out the problem was caused by the css directive table-layout: fixed;
Changed it to table-layout: auto; solved the problem.
I have recently encountered an issue in Opera, where it attempts to display scrollbar on a position:absolute+overflow:auto parent, when the child element has more content but with max-height set.
To illustrate the scenario, view this demo: http://jsfiddle.net/kMZKm/12/
Changing the positioned element to have a fixed height, or changing the inner element to use height:100% instead of max-height:100%, will not trigger the scrollbar in Opera.
Other browser such as Chrome, Firefox or IE, does not display scrollbar in neither scenarios.
I am wondering if this is a bug in Opera (appear in both ver.11 and 12), or just an undefined scenario in w3c spec?
(it might seem counter-intuitive to have overflow:auto parent with max-height children, but the setup is actually quite useful for things like javascript scrolling, Opera's behaviour cause unexpected height of child element to be reported, thus breaking the custom scroll)
If you zoom out, the scrollbar appears in the other browsers as well. A changelog may be the reason: Spatial navigation in an overflow:hidden box not scrolling
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
I have a calendar that is a table. For some reason, IE is adding a vertical scrollbar to the edge of the page but there is no scroller (and nothing to scroll) FF and Safari look fine.
Any idea?
This is normal in Internet Explorer, and to my knowledge can not be turned off except maybe with a overflow:hidden on the body or html element, with the obvious downside that the page then can't be scrolled at all.
If you need to get the exact same behaviour in all browsers, and want to add the deactivated scrollbar to FF and Safari, check my recent question.
If you put overflow: auto in the body element and just remove overflow:auto or any other overflow setting in the other elements on the page, then the main browser scrollbar will allow scrolling down the page and the page will expand, moving the footer down as well.