Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using:

CSS:

#pagy2 {
    background: #f3fff3;
    border:1px solid #c9dbab;
    width: 100%;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    min-height:100% !important;
}

@media print
{
    .print_special { border: none !important; } 
}

HTML 

<body>
    <div id="headercontainer" class="noprint"></div>
    <div id="pagy2" class="print_special">
        <div class="page">
            <h1>Title</h1>
            <table>
          <tr>
cssprintingborder

Answer №1

To ensure the border is properly overridden, make sure to target the initial selector and override its border property like this:

@media screen
{
    #pagy2 { border: none !important; } 
}

Answer №2

Can you please indicate where in the stylesheet this style has been placed?

If it's currently at the top of the CSS file, it may not be functioning correctly. I recommend moving it to the bottom of the CSS page for optimal performance.

Answer №3

Perhaps this information will assist you, or perhaps you need to disclose the contents of the "noprint"/"page" css.

#pagy2 {
    background: #f3fff3;
    border:5px solid #000;
    width: 100%;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    min-height:100% !important;
}

@media print
{
    #pagy2 { border: none !important; } 
}
<body>
<div id="headercontainer" class="noprint"></div>
    <div id="pagy2">
        <div class="page">
            <h1>Title</h1>
            <table></table>
</div>
</div>
</div>

Answer №4

This method successfully resolved the issue for me 

@media print {

    * {
        color: #000;
        background-color: #fff;
        @include box-shadow(none);
        @include text-shadow(none);
    }
}

Answer №5

In my opinion, the issue can be resolved with the help of jquery.

$(document).ready(function(){
    $('.print_special').css({ border : 'none'});
});

I trust this solution will address your concern.

Check out the JSFiddle demonstration here: http://jsfiddle.net/j83u4Ltr/4/

Answer №6

@media print {
    body { background-color: white !important; }
}

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

Photoshop optimized webpage appearing distorted on Internet Explorer after saving for web

I designed a webpage using Photoshop, sliced it, saved it for the web, and uploaded the HTML file. It looks great in Firefox and Chrome, but Internet Explorer tells a different story. Does anyone know how to fix it and why there is this black padding? IE: ...

htmlcss

Using CSS to apply alternating colors to span elements within children

My DOM structure is generated by a JS framework and may appear like this: span:nth-child(odd) { background-color: lightblue; } span { display: block; } <div id="parent"> <div class="child"> <span>Some text to color in alte ...

htmlcss

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

I have encountered a puzzling issue: http://jsfiddle.net/akosk/t2KvE/8/ HTML <div id='base'> <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe> </div> <script id="conte ...

htmlcss

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

htmlcssweblayoutbootstrap-4

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

Enhancing jQuery Mobile listview with voting buttons on each item row

I am looking to incorporate 2 vote buttons within a jQuery mobile listview, positioned on the left-hand side and centered within each list item. While I have managed to achieve this using javascript, my goal is to accomplish it without any additional scrip ...

javascriptjqueryhtmlcssjquery-mobile

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

javascripthtmlcss

What is the best way to limit the top margin for a fixed element?

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

jquerycssscrollfixed

Is a Responsive Split Layout the Solution for Your Web Design Needs?

I'm looking to create a webpage layout where the left half of the viewport is for Login and the right half is for Signup. This layout should be split side by side on tablets, desktops, and large screens, but stacked vertically (Login on top, Signup on ...

htmlcssbootstrap-4

Managing the intersection of div elements

Can someone help me make the inner part of the red circle white, overlapping with the blue circle and transparent for the rest to reveal the green color underneath? If anyone has a solution, I would greatly appreciate it. #bigCircle { display: flex ...

cssoverlap

What are some techniques for applying CSS styling directly to a custom element?

Check out this amazing resource from HTML5 Rocks about the process of creating custom elements and styling them. To create a custom element, you can use the following code: var XFoo = document.registerElement('x-foo', { prototype: Object.crea ...

javascriptcsshtml

Troubleshooting the Div Ordering Problem in Bootstrap 4

Currently, I am using Bootstrap 4 and facing an issue with the layout order. Despite searching for a solution extensively, I have not been able to get it right or find one in the archives. Here is what I need... For desktop view, the layout should appear ...

csstwitter-bootstrapbootstrap-4

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

The art of bringing a pseudo class to life through animation

Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the pare ...

javascriptjqueryhtmlcss

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

What function does the sx prop serve in Material UI?

<Container style={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Container> <Container sx={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Cont ...

cssreactjsmaterial-ui

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

<a href="#goto">Link 1</a> <div id="goto">DIV</div> Whenever I click on the anchor tag, my webpage reloads and displays a new div with the ID of goto. This div was previously hidden but is now visible at the bottom of the page. I ...

javascriptjqueryhtmlcss