The print reviews on the website will consistently feature a stylish border using HTML/CSS

Facing a challenging situation studying HTML + CSS, I encountered an issue with my code:

html file:

#leftblock
{
    width: 150px;
    height: 100%;
    position: fixed;
    background-color: brown;
    border: 1px solid black;
}

#rightblock
{
    background-color: #A54739;
    height: 700px;
    width: 500px;
    left: 159px;
    position: absolute;
    border: 1px solid black;
}
#rightblock #subrightblock
{
    height: 660px;
    margin: 20px;
    background-color:bisque;
    font-size: 10px;
}

#menu
{
    text-align: center;
    padding-top: 20px;
}

#menu ul
{
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    width: 110px;
}

... (other CSS properties)

wydruk.css

#leftblock
{
    display: none;
}

#rightblock
{
    text-align: left;
}
#rightblock #subrightblock
{

}

#menu
{
    display: none;
}

body
{
    border: none;
}

#menu ul
{
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    width: 110px;
}

... (other CSS properties)

Encountering a strange issue where a border appears on the right side of the A4 paper in print preview despite no specific border settings in wydruk.css. Any insights or solutions to this problem would be greatly appreciated.

Answer №1

My assumption is that the CSS code in the initial snippet originates from "style.css", and your objective is for "wydruk.css" to take precedence over it during printing.

To achieve this, simply include media="screen" in the first stylesheet link as shown below:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

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

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Introduction Utilizing Bootstrap 5 (included with webpack 5), I am implementing the grid system and collapse function to design the homepage of this website, featuring 2 sidebars that collapse into a top bar. On mobile devices, the navigation collapses a ...

The CSS functionality for the body tag operates seamlessly even without the presence of the body tag in the

My style.css file has the following code: body{ background-color:pink; font-size: 130%; } This is the code in my style_placement.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

Avoid displaying images that have not completely loaded

My website has a feature that displays user data, including various types of images such as Personal and Learning. To showcase these images, I have implemented a Modal with an img tag. One issue I have encountered is that there is only one Modal and one ...

trouble concerning the responsiveness of a jQuery popup

Hello, I am trying to create a responsive login popup using jQuery but have been struggling for a week. Below is the code snippet that I have been working on. Any help or guidance would be greatly appreciated. //scriptLogin.js archive $(document).ready ...

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

How is it possible that this component is able to work with slotting without needing to specify the slot name

I have created two Web Components using Stencil.js: a Dropdown and a Card. Within my Dropdown, the structure is as follows: <div class='dropdown'> <slot name="button"/> <slot/> </div> The nested chil ...

Can you tell me the specific name of the HTML document style that features two columns?

Here are two websites that showcase a unique two-column style layout: http://momentjs.com/docs/ I find these sites visually appealing and I am curious about the specific name of this style. Is there a template or tool available to create documents with a ...

What is the fate of a JavaScript event bound to an element once the element is deleted?

Imagine having an element like this: <section id="container"> <div id="curious">hey, there</div> </section> Once the DOM is loaded, an event is bound to the element as follows: $('#curious').click(function (){ ale ...

Is there a way to modify the text color when hovering over an image map?

I am facing an issue with my code. My goal is to change the text color (headline and subline text) from black to white. The default image contains 10 Hotspots, each with its own text. Upon hovering over a Hotspot, a new background-color (new image-map with ...

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

Is it necessary to sanitize strings before assigning them as the content of a textarea element?

Consider the situation described below: var evil_string = "..."; $('#mytextarea').val(evil_string); Is it necessary to sanitize an untrusted string before setting it as the value of a textarea element? While I am aware of the importance of han ...

1 in every 3 divs in jQuery, chosen randomly

Hey there! I have a fun project in mind - programming a "Rock Paper Scissors" game with the computer. The only issue is figuring out how to make the computer choose a random object after I pick one of the 3 options. Here's what I've come up with ...

Manipulating SVG filter attributes with CSS: A comprehensive guide

In my quest to master CSS animation, I found myself needing to manipulate the values of SVG filter attributes. While attempting to reference a CSS variable within the specularConstant attribute, I encountered an error from the browser. Is it feasible to ...

Discovering a particular text within HTML source code can be achieved by utilizing regular expressions (

Getting String values from unicode HTML source shouldn't be difficult. The original code snippet is structured like this: <div id="encompass"> <tr class="lineonoff"> <td class="xsmall">27</td> ...

Close Modal When Clicked Outside of It - CSS & JS

Presently, I am in the process of creating my own modal for the system. When you click on a package name, the modal pops up and is displayed. I have implemented some JQuery code that should remove the modal when clicking on the background. However, it also ...

Utilizing jQuery for Dynamically Loading Child Elements

As users select choices from a side menu, a set of items is dynamically added. The more choices they make, the more items are displayed. Some items have a 'stats' div while others do not. I want to check if an item has a 'stats' div, a ...

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

What is the method for obtaining the ID of a dynamically generated DropDownList and verifying if its value has been altered?

I successfully created a view with the help of Steven Sanderson's blog where a dynamic number of textboxes and DropDownList are generated. Everything is functioning properly. However, I would like to ensure that the form cannot be submitted until each ...

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...