While printing one of the pages, the content is zoomed in. This happens in IE8 which seems to be a Shrink to fit issue. This works fine if I render in IE 7 but then many UI elements break.
Is there a way to fix Shrink to fit issue in IE 8 using CSS or Javascript?
Thanks.
Related
I have a webpage that prints out tickets. I need the layout to correctly fill the paper. Im currently using this solution offered by LittleGnome. It works fine in Firefox, but in Chrome and IE the layout is messed up. The scale is too big and the content is spread over 4 pieces of paper instead of one.
When i used chromes dev tools to debug the print layout, it seemed like chrome cannot handle the flex containers correctly. All the elements on the layout have a size of 8000X4000 pixels, which is totally wrong. What might be causing this and how to fix this?
JsFiddle for the current version
I've used the fix in this question to resize images in one single line and it works perfectly, that is until you get into IE then IE just decides to ignore it completely. Does anyone have a fix?
Here's what I used:
How to get multiple images to auto resize and stay centered within a div
Here's the page I'm working on in Chrome:
Chrome Visual
Here's the page I'm working on in IE:
IE Visual
Thanks :)
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
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...