I have a element on my form that looks like this:
<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">
In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.
Is there something I can do so that the scrollbars show properly when the page first displays?
Set overflow-y to "scroll" if you always want a scrollbar.
That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.
The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.
I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.
I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.
You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.
Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc
With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...
try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...
Related
I ran into a following issue. I have a popup dialog with a scrollbar. In Google Chrome it has space reserved for a scrollbar. However, Firefox does not reserve any space for a scrollbar, so when it appears, it can overlap content (see screenshots). Probably it is somehow related with the fact, that firefox hides scrollbar unless you hover scrollable area. Could you suggest any solution to make firefox reserve space for scrollbar the same way as Chrome do?
Screenshot in Firefox
Screenshot in Chrome
Really great question! Unfortunately, As far as I'm aware, there is no simple solution to this problem. I would recommend creating a design that looks good with or without the space differences that the scrollbar creates.
But if you are dead-set on creating a more versatile solution, you could change the scrollbar using Javascript/Jquery (See this answer:Custom CSS Scrollbar for Firefox), or you could try and detect the browser, and accommodate extra padding for elements with scrollbars for users using Firefox(See this answer: How to detect Safari, Chrome, IE, Firefox and Opera browsers?)
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
If you look at this page in IE7:
[redacted]
If you hover over one of the lines in the chart, you can see the little yellow popup stretches across the page. It shouldn't and doesn't in other browsers. Can somebody tell me why this is happening in IE7?
For what it's worth, I can fix it by specifying a width for that div with CSS. I'm just curious why it's happening 'cause the client will ask!
Ok... firstly - that code is clearly very old. I can tell, because it's sniffing to see whether or not your browser is IE4 (yes, that's a four). Unfortunately, it considers that any IE browser is IE4...
If it detects IE4, it then goes on to set the width of the layer it creates to be the same width as the window - which is why it's so horribly wide for you.
As you've discovered, you should be able to add some CSS to override that width yourself.
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
Followup 2
Here's a link to a demo page.
As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page
i prefer using http://www.curvycorners.net/
I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position.
Applying the rule "display: inline" to the element seemed to stop the issue.
"Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.
It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on
refresh. But if you remove the rule, it still looks okay on refresh, until you
close and reopen the browser window - then the jumping reappears.
Hope that helps someone.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?
I don't have any code to show as it is on a intranet system. However I have noticed a couple of weird things when looking at it in IE6. This isn't the usual box model problem or IE6 rendering things differently.
One thing that I noticed is on a div where I have a gradient background with repeat-x attribute. When the page loads in IE6 (and any other browser) it looks fine. However when I scroll down the page and back the background appears to repeat in the y direction too?!
Also I have a footer div, which is flush to the content. Again at first this is fine. However when I scroll it off the page and back there appears a gap, which gets bigger when I scroll off and back again. Once more returns it to what it originally (and should) looked.
Are there known IE6 rendering bugs for such problems or is it just bad coding?
Thanks.
Try adding zoom: 1 to blocks with problems. If it works — it's hasLayout problem.