Question

I have added a print button to my page.

<button type="button" class="printBtn">Print This Page</button>

And now I want to remove the element from the print.

I used:

.printBtn{ display:none;}

This works for all other browsers perfectly but for some reason IE does not entirely remove the button when I print the page. The button does not display in print but it messes up the format of my images

example of the images aligned properly not in print preview:
http://i244.photobucket.com/albums/gg5/robasc/Untitled2.png?t=1323881931

example of the images not aligned in print preview and the button is removed using the above css and html:
http://i244.photobucket.com/albums/gg5/robasc/Untitled.png?t=1323881871

I believe the button still exists and is distorting the rest of the elements in the document.

Does anyone know how to fix this issue?

Answer 1

You could try using ‘onbeforeprint’ and jQuery to remove the button from the DOM (a little heavy handed).