Print Preview Layout in CSS for Optimal Margins

I'm having trouble adjusting the margin sizes on a page in Internet Explorer 11 Print Preview. I also want to remove any content from the margins (such as page numbers, titles, URLs, etc).

I've successfully set the margin size, but I can't seem to clear the content. Here's my code - can anyone spot what I might be doing wrong? Once I figure out the issue with the top margin, I'll apply the fix to the others.

<!DOCTYPE HTML>
<html>
<head>
<title>Print Test</title>       

<style type="text/css">

@page {
    margin-top: 50mm;
    margin-bottom: 50mm;
    margin-left: 50mm;
    margin-right: 50mm;

    @top-left-corner {content: none}
    @top-left {content: none}
    @top-center {content: none}
    @top-right {content: none}
    @top-right-corner {content: none}    
}

</style>    
</head>
<body>
    <h1>Header Here</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
</html>
htmlcssprintingmarginsprinting-web-page

Answer №1

An interesting observation is that selectors like :first, :blank, :left, and :right have a higher specificity level compared to @page alone.

To override these selectors, you can try the following CSS:

@page, @page :first, @page :right, @page :left, @page :blank {
    @top-left-corner {content: none}
    @top-left {content: none}
    @top-center {content: none}
    @top-right {content: none}
    @top-right-corner {content: none}  
}

Update: I primarily use PrinceXML for rendering. It's worth noting that these selectors are not widely supported in browsers. You can check Margin boxes support for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

javascriptjquerycssfontsfont-face

As the value steadily grows, it continues to rise without interruption

Even though I thought it was a simple issue, I am still struggling to solve it. What I need is for the output value to increment continuously when I click the button. Here is the code snippet I have been working on: $('.submit').on('click&a ...

phpjavascripthtml

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

Tips for maintaining consistent formatting of a div element across various sizes

Looking to create a Bootstrap Jumbotron that features a background image, text (h1 and p), and a call-to-action button that scales appropriately for different viewports without sacrificing formatting. Essentially, the goal is for the div to behave like an ...

htmlcsstwitter-bootstrapcss-transitionstransform

Is there a way to extract all the `<select>` elements from a table and store them in an array?

I'm having some trouble with the order of my code and the array output. Everything seems to be a bit jumbled up right now and I can't figure out how to add all the rows correctly. $('#clicker').on('click', function(e) { v ...

jqueryhtmljson

Utilize LESS Bootstrap as a guide for incorporating content

I have been struggling to properly integrate Bootstrap into my LESS file. Currently, I am adding Bootstrap to my project using NPM. If I simply use the following import statement in my LESS file: @import (reference) 'node_modules/bootstrap/less/boot ...

csstwitter-bootstrapless

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

If the corresponding link has not been clicked, the field should be set to hidden

Whenever a user clicks on a specific link, I dynamically load additional information and reveal a multi-select drop-down menu called holds[]. If the user chooses not to click on the "more info" link, then the holds[] drop-down menu will not be displayed, ...

phpjqueryhtmlajax

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

Transfer an HTML file generated in real-time to an external server using SFTP

I am currently working on creating an HTML file dynamically using the file_put_contents function and the ssh2 library for SFTP. However, I am facing an issue where Apache is reporting that the file cannot be sent because it does not exist on the local dis ...

phphtmlftpsftp

What is the reason for receiving 'undefined' from await page.Evaluate() function call?

My attempt at creating a deploybot using nodejs is encountering an issue when trying to access the environments page, as it's unable to locate the button. The code snippet in question is as follows: //wait until element with unique id contain ...

htmlnode.js

Sound did not play when certain pictures made contact with other pictures

English is not my native language and I am a beginner in programming. I know my explanation may not be perfect, but I'm trying my best to communicate my ideas clearly. Please be patient with me and offer constructive feedback instead of downvoting, as ...

javascripthtmlfunctionaudiokonvajs

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Add some animation to elements when the page loads

I am curious about triggering a css animation when the page loads. I am currently experimenting with css animations for the first time. Here is what I have created so far: https://jsfiddle.net/7prg793g. However, it only works upon hover at the moment. * ...

htmlcss

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

javascriptphphtmlajaxjson

Position a div adjacent to a particular, changing Rails component once jQuery has toggled it

Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving commen ...

jquerycssruby-on-rails

What is causing the navbar to malfunction on mobile devices?

I am facing an issue with my bootstrap navbar. It seems to be getting stuck when the screen resizes or when viewed on a mobile device. I have tried several solutions from various sources, but none seem to work. Here are some of the answers that I have look ...

javascripthtmlcssbootstrap-4

Extract the title of a research paper from the personnel website

I am looking to extract the title and authors of journal articles from the official web pages of all staff members. For example: https://eps.leeds.ac.uk/civil-engineering/staff/581/samuel-adu-amankwah The specific section I need to access is this: I am u ...

htmlrweb-scraping

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

javascripthtmlcss

Incorporating HTML within PHP

I'm struggling with the following issue: after this, I end up with a blank page. Here is the code snippet in question: I am attempting to use HTML within PHP and then PHP again within HTML. The rest of the code is functioning correctly. If I replace & ...

phphtml