I'm having an issue with IE9 showing horizontal scroll bars on a printed page even though the contents of the page fit entirely. I've tried several things to remove them in my print css. Has anyone else had this issue and found a way around it?
I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.
overflow:hidden !important;
I have had this issue several times with IE in the past. It is usually a margin issue. Different browsers calculate margins differently. How are you positioning the elements? Do you have a fixed-width wrapper around the content or does the body expand to the browser width?
It's really difficult to pinpoint the problem without the actual css code.
I would suggest removing any negative margins you have (IE does not like these), and check to see if you have any right margins on elements that are unnecessary.
#media print{
.dont-print
{
overflow:hidden;
}
}
dont-print is just a class name which i've used before, changed that to whatever you need
Use following code on body tag in JavaScript function print:
printWin.document.write(
'<style>div {overflow: visible !important; height:auto !important;}</style>'
);
Are you sure you set the right stylesheet media type? Like:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />`
And try the following in your print.css:
html, body { overflow-x: hidden; }
Related
I realize this question has been asked before but the solution that is usually supplied involves adding this to the target tag:
overflow-x: hidden
which I've done. This fix prevents horizontal scrolling in Firefox but fails when it comes to Chrome and IE8 (not so much an issue at this moment in regard to IE8). Judging by previous questions this may have become an issue since Chrome version 34. So how do I go about fixing this?
Thr problem CSS that is causing the scrolling looks like this:
// Tablet portrait and landscape
#media (min-width: #screen-sm-min) {
& {
margin: 0 -100% !important;
padding: 30px 100% !important;
}
}
the above causes the content to appear evenly in the center as per the requirement. Any advice on this or a possible resource to explain why this happens in Chrome?
Thanks
P.S. I also noticed that this site doesn't have that problem - why would that be? Fundamental difference in structure? Or the CSS I'm looking for?
Thanks for everyone's efforts even though I provided little information. We solved the error though we still don't know why it was happening. We have different .LESS files for different pages but they are all imported into one called ice-styles.less
Here was were I was adding the overflow-x: hidden and for some reason this was being ignored even with an !important suffix appended. My understanding of this was that it should apply to all pages because it was being attached to the html and body tags.
So we moved the same line above into the .LESS page that the problem was occurring and it fixed the problem - but it didn't introduce the problem into other pages - this suggests that the structure of the page was the real culprit.
Thanks again everyone
did you tried styling it by jquery?
$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})
or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})
there is something that is overwriting you overflow:hidden tag...
maybe there is some css that gives your element some width and then you force the overflow which does not happen at times in chrome or IE...
html {
overflow-x: hidden; //or none
}
I have the following situation, in .NET I have a master page that contains the following CSS for printing:
<style type="text/css" media="print">
div{overflow:visible !important}
</style>
This works fine in Firefox and Chrome, however, in IE the top of the page gets cut off. I spent quite a bit of time trying to adjust the page, I know I need overflow:visible !important otherwise the page looks terrible in other ways, like the scroll bar appearing. Anyone have any advice?
Printing CSS:
Make sure all print floats are: float none;
Make sure your body is overflow-y: visible;
Make sure all your contents for print have display: block;
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.
Been browsing the questions and Googling it but I can't seem to find a fix for this issue. The layout looks perfectly fine for the Grid anywhere else except for IE7 (surprise).
http://lalive-branch.aeg-webdev.com/
The boxes should all be within 5 pixels of each other, but in IE7 the spacing below divs get botched up completely. There are a few fixes I put to try to minimize the display differences between browsers, but this one just boggles my mind completely.
Any insight or help would be greatly appreciated. Please ignore the jquery error and the likes :), thank you.
Remove: clear:both inside your css code for:
.gridRow {display:block; /* Remove - clear:both; */}
Then it will work on all browsers.
you have to use script for solve this error of css.
in your core you have to create one javascript and this script you have to create one method like as below.
if(browser_version == 7 || browser_version == 8){
document.getElementById("your_div").style.padding = padding as you want.
}
else{
document.getElementById("your_div").style.padding = default padding.
}
i think this can help you for Browser CSS Error.
You have to make few changes inside your CSS:
1) Inside .gridRow remove clear: both then you should consider adding overflow attribute and put all margins and paddings inside .gridRow insted of .gridBox. It's better practise because you need to change only one class when your layout get changed.
.gridRow {
/*clear: both;*/
display: block;
margin-top: 5px;
overflow: auto;
}
If you want IE7 styles only, you can add the following to your tag:
<!--[if IE 7]>
<style type="text/css">
.myIE7onlyClass {/*styles here*/}
</style>
<![endif]-->
I have a page which when printed by one user prints scrollbars for one of the divs in the page. I can't reproduce the problem. Any idea what it might be? If it matters, it's a floating layout, and the page has iframes. Though, the problem occurs with just one div within the frame.
Thanks.
Printing can be troublesome as the user has a lot of control over how things appear. However you could always create (if you haven't already) a CSS for print.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In this document you could set overflow: hidden; for the element you mentioned which should remove the scrollbars, but be careful as any content that genuinely requires scrollbars will not be seen.
#media print {
#scrollbars{margin-left:auto; margin-right:auto; overflow:visible; width: 70% !Important}
}
without your markup this pretty hard but whatevers:
in the print css, we're going to want to target your rogue div. idk if overflow:visible is needed. i can't see your styles. the marginal sides actually should be placed on the <body> element, but i can't see your shizz.
that should work, but you could always target it with scrollbar...i guess. idk, i've never used scrollbar in conditionals, let alone print. you can't use transparent, i know that. either way:
you can target it like this
scrollbars{
scrollbar-base-color:none;
scrollbar-3dlight-color:none;
scrollbar-face-color:none;
scrollbar-highlight-color:none;
scrollbar-shadow-color:none;
scrollbar-arrow-color:none;
scrollbar-darkshadow-color:none;
scrollbar-face-color:none}