Scroll bars showing on printed page in IE9?

Question

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?

Yes. I've also hidden everything on the page and the scroll bars still appear. — Ryan, Mar 10 '11 at 17:51
Have you tried to style scrollbars? my guess is that IE still support that.. but are you sure you applied overflow:hidden to the right element? or is in a frame or something? May be it's an advertismenet with bad css? — Loïc Faure-Lacroix, Mar 10 '11 at 18:37
It would be of much help if you provided a link or screenshot of your current issue. — Web_Designer, Mar 16 '11 at 20:53

score 13 · Accepted Answer · answered May 22 '12 at 07:52

13

I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.

overflow:hidden !important;

answered May 22 '12 at 07:52

shibualexis

4,534
3
20
25

5

Also worth noting is that you could use `overflow:visible!important;` too. This also gets rid of the scrollbars but *shows* any content outside. – jaypeagi Jun 24 '13 at 11:23

score 2 · Answer 2 · answered Mar 27 '11 at 04:02

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.

score 0 · Answer 3 · answered Oct 11 '13 at 13:21

0

@media print{

    .dont-print
     {
        overflow:hidden;
     }

}

dont-print is just a class name which i've used before, changed that to whatever you need

answered Oct 11 '13 at 13:21

Crouch

846
3
17
32

score 0 · Answer 4 · edited Apr 09 '18 at 07:55

0

Use following code on body tag in JavaScript function print:

printWin.document.write(
  '<style>div {overflow: visible !important; height:auto !important;}</style>'
);

edited Apr 09 '18 at 07:55

Mohammad Usman

37,952
20
92
95

answered Apr 09 '18 at 07:33

hadi safari

31
2

score -1 · Answer 5 · answered Mar 11 '11 at 10:06

-1

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; }

answered Mar 11 '11 at 10:06

NickGreen

1,742
16
36

Instead you can try: `html, body { overflow: auto; }` – Ketan Modi Apr 23 '11 at 04:54

Scroll bars showing on printed page in IE9?

5 Answers5