"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page.

Any suggestions on what I need to change in order to show the border on every printed page?

Below is my print media CSS and a screenshot for reference:

@page {
    size: A4;  /* auto is the default size */
    margin: 1.54cm 1cm 1.54cm 1cm;
    marks: crop cross;
}
html, body {
    -webkit-print-color-adjust: exact;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    border: 2px solid #cc0000!important;
}
.contract {
    min-height: 100%;
    position: relative;
    height: 100%;
    box-decoration-break: clone;
}
h2, h3 { 
    page-break-after: avoid; 
}

See the screenshot highlighting the issue here:

htmlcssprinting

Answer №1

Dealing with a comparable issue, I found a solution that worked for me: 

#content {
     border-style: solid;
     border-color: blue;
}

If the above method doesn't solve the problem, consider inserting the border color directly within the media. Just make sure to include border-style: solid; initially.

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

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: https://i.sstatic.net/LiQtY.png A smaller window: https://i.sstatic.net/dgj4I.png C ...

htmlcsswebresponsive-design

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

Manage the size of the menu element within Material-UI

I'm currently working on incorporating a menu item with a login form inside it. The functionality is there, but the width of the form is way too small. I've been searching through the documentation for a solution, but haven't come across any ...

cssreactjsmaterial-ui

Looking for the optimal width ranges for media queries on laptops and cell phones?

Can anyone suggest the optimal width parameters to use in my code for different screen sizes, from tablets and laptops to cellphones, in order to create a responsive design? ...

htmlcssfixed-width

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

javascriptjqueryhtmlnode.js

Steps for closing the menu by clicking on the link

My issue with the menu on the landing page is that it only closes when clicking the cross button. I want it to close when any link from the menu is clicked. I attempted to add code using querySelector, but it only worked for the home link and not the other ...

javascripthtmlcss

What is the best way to create a div with a smaller background color than its content?

Can someone help me with adjusting the size of a gray box in this code so that it is smaller than the text inside it? .media-body { background-color: gray; } <div class="media-body"> <h5>Lagoa Azul</h5> <span class="texto-medi ...

htmlcss

Struggling to align button text vertically in the center

I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...

htmlcss

Issue with Bootstrap Scrollspy: Scrollspy function not functioning as expected

I need help with creating a one-page website where the navbar links change based on the section of the page you are on. I tried implementing it using HTML, but it didn't work out as expected. The code I used was within the container holding different ...

javascripthtmlscrollspy

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: https://i.sstatic.net/foUiy.png I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a b ...

phphtmlcssxampphref

Unique Pie Chart Designs

As I attempt to create a dynamic arc-shaped pie graph using CSS, representing 100% of the data, I find myself facing challenges. Despite extensive research and Google searches, I have yet to come across a suitable solution. The following reference appears ...

csshtmlgraphchartssvg

Automatically navigate to a specific element as the user scrolls down the page

I am attempting to achieve a similar effect as seen on the App Builder Website. When the user reaches the header with the background image/video and scrolls down, the website smoothly transitions to the next div/section. If the user scrolls back up and ret ...

javascriptjqueryhtmlscroll

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

htmlcssbordermarginpadding

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Raising css properties using jquery

Is there a way to adjust CSS values using jQuery? I am looking to specifically increase values like top and left, but my current attempt is not producing the desired outcome: var left = 5; $(.object).css("left" + 5); The challenge I am facing is that I ...

jquerycss

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...

css

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

javascriptjqueryhtmlcsshref

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

footer extending beyond the previous div's boundaries

Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a foote ...

htmlcssbootstrap-4