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}
Related
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 am doing this site for a friend http://www.kidsmartnyc.com/ and there is an enormous white space in IE8 below the middle image that is not visible in any other browser or any other version of IE. Please help, I have tried everything:)
Change your css, you defined #page1 h1 { height:250px;} .. change this...
I'm seeing a couple of things:
Like Jordy said, you set a height on your #page1 h1 tag. That's usually not necessary. The reason you're not seeing it is because the h1 tag is empty, like this:
<h1></h1>
Below that in the code, you just have a couple of tags that are also creating more space. Take those out and you should be fine.
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.
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; }
For a while, I've been putting * html div { zoom: 1; } in my base stylesheet, and it has worked great. However, I now run into situations where there're elements that are absolute positioned that are losing their heights and widths in IE 6 cuz of this. So I'm thinking of putting * html div { height: 1%; } instead, but what are the side effects?
Update:
Thanks for all your responses. The answer is most probably no side effects as all of you said.
I will however have to disagree with all your recommendations (at this given moment) about how/when to trigger haslayout. I see haslayout a desirable behaviour and should therefore be a default behaviour in IE6 (& 7).
It's been mentioned that it's unlikely there would be any side effects, for the exact reason, why not make it a default behaviour and only turn it off when an undesirable behaviour (if ever) occurs.
One can do this by specifying {zoom: auto;} or {height:auto;} on that specific element depending on how it was defined in the base stylesheet.
I will have to give the answer to the first person that said "no side effects" since everyone's answer is the same, while some went out of scope. Thanks again!
This is known as The Holly Hack. As far as I know, there isn't a side effect, especially if you * html it for IE6 directly. I agree with the other posters that placing it on the <div> tag may not be the wisest choice - I'd target the individual elements that are causing grief.
I try to minimize the use of these kinds of workarounds to avoid unforeseen problems; I only use it on the elements that need it when IE6 breaks a lay-out, never on all elements in a page.
I also don't think there are any side effects. But as mentioned - only use it on what you need to. I'd personally...
Use it only on a set class:
html .haslayout { height: 1%; }
Place it in an IE 6 stylesheet included via a conditional comment
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" media="screen,projection" />
<![endif]-->
Hope that helps
A 1% height should have no effect because IE treats dimensions as min-dimensions really. However pos:abs is enough to give haslayout anyway and I agree with jeroen that blanket assertions like this are not wise. This is not something you want in a CSS reset for example.