Text overlapping issue in Chrome's print preview mode

Having trouble with this issue. I've attempted to adjust the margins and padding of the text and cells, but have not been successful in resolving it yet. This problem only seems to occur in Chrome

Let's take a look at some code. Here is the main print.css file:

@page 
{
    size: size 21cm 29.5cm portrait;
    margin: 1.3cm;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Page Layout
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

body { padding: 0px; margin: 0px; }

div.OuterShell { width: 100%; border: none !important; padding: 0px; margin: 0px; }
div.InnerShell { width: 100%; border: none !important; padding: 0px; margin: 0px; }

... (omitted for brevity) ...

.SkillsTable ul { list-style:none; margin:0 0 0 5px !important; }

The page also utilizes another print CSS sheet called paperwork. Here is its content:

   ... (content continues)
htmlcssgoogle-chrome

Answer №1

In order to ensure that vertical padding functions properly for particular table cells, it is important to avoid using fixed height properties such as min-height or height.

Answer №2

It's difficult to say for sure, but it seems like you might be specifying exact heights and sizes in pixels. Upon further examination, you may discover that various browsers have their own default settings for margins, padding, text size, font styles, and more. This could be causing some confusion.

If you provide a code snippet, I may be able to offer more assistance.

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

Encountering ElementNotVisibleException while attempting to log in using Python and Selenium on a website with

I'm at my wit's end trying to solve this "ElementNotVisibleException:" error that is driving me crazy. Despite attempting various techniques I found online, none of them seem to work. I thought using .send_keys in combination with a WebDriverWait ...

pythonhtmlseleniumselenium-webdriversendkeys

Refresh the image following the ajax request

I seem to be encountering some difficulties. Whenever I click to rotate an image using ajax and save the new image, it does so without refreshing the page. However, the issue arises when the old image is not updated with the new one that is refreshed. Fu ...

javascriptjqueryhtmlajax

Tips for saving and editing a file with JavaScript

I need a website visitor to input text into a text area on my site. When they submit the form, I want the entered text to be saved in a .txt file located in the same directory as the current web page. I am unsure of how this can be accomplished, and if i ...

javascripthtmlfile

Here's a simple script to display a div or popup only once in the browser using plain vanilla JavaScript

// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...

javascripthtml

Guide to positioning front layer in CSS3

I am currently working on a page and have added an "Under Construction" banner to indicate it is not yet finished. Could someone assist me in bringing the png to the forefront on this link? ...

htmlcss

Fixed Header Table

Whenever I attempt to set the table header at a position other than 0, the body ends up scrolling above the header. Below is the code snippet showcasing the issue: .test { padding-top: 50px; } th { background-color: orange; position: sticky; to ...

javascripthtmlcssbootstrap-4flexbox

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

Leveraging PHP Sessions for real-time content updates on a separate webpage

I have just discovered PHP sessions and now I am eager to learn how to use them effectively. Is it possible to declare all the variables in a separate PHP document and then call them from other pages? If so, can someone provide me with a simple example? F ...

phphtml

The .csv file that was downloaded is filled with HTML tags written as plain text

I need to obtain a .csv file by clicking on a Download link within a template file. Here is the code snippet I have written to generate the .csv file: public function loadPartnerApplicantData() { // Code for generating .csv file goes here } The .csv ...

phpcsvhtml

What specific style of CSS is utilized in Material UI's `sx` property feature?

I came across this code snippet in the Material UI documentation: <FormControl sx={{ "& > :not(style)": { m: 1 }, maxWidth: "100%", minWidth: "100%", }} > It appears that & is not a standard p ...

cssreactjsmaterial-ui

Completing numerous forms on a website

Every day, I find myself manually completing forms for a game and I am looking to automate this repetitive process. The only difference in each form is the 'nation' it is being sent to. To simplify, I want to create a list of nations and then loo ...

javascripthtmlformsiframe

Changing the text color of a selected text in HTML

I have a feature to change the color of selected text using Javascript. Here is the method I am currently using: function marking_text(replacrmenthtml){ try { if (window.getSelection) { sel = window.getSelection(); var ...

javascripthtmlcssgetselection

The value of the parameter '<' has been converted to '<'

I am currently utilizing ExpressJS in conjunction with the body-parser library. Upon passing a parameter value of 2<5, it is observed to be altered and converted to 2&lt;5 read: async (req, res, next) => { try { let condition= req.q ...

javascripthtmlnode.jsexpressurlencode

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for l ...

htmlcss

To activate the javascript function, the hyperlink requires a double click

There is a hyperlink in my code and I want to trigger a function upon clicking that hyperlink. The function does work, but the issue is that it requires two clicks to execute. I have searched online for a solution but haven't found anything that reso ...

javascriptjqueryhtml

Tips for automatically shifting tab focus to a popup upon opening, rather than retaining focus on the previously selected item

Utilizing a custom popup modal for confirmation messages from users has presented me with a challenge. When certain validation or confirmation messages need user input, the popup opens based on focus out of input fields. However, I have noticed that when t ...

javascripthtmlangular

Any tips on how to position my navigation bar in the center of the screen?

My current issue involves my Nav Bar. I am striving to center it on the screen, positioned in the middle of everything. However, my Nav Bar stubbornly remains fixed to the left side of the screen. I attempted to utilize Margin to rectify this problem, but ...

htmlcss

What is the best method to vertically center a container in bootstrap 4 at a specified height?

I'm trying to center a container in Bootstrap 4. I have an element with a width of 300px. .guide-background{ background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg"); background-repeat: no-repeat; backgrou ...

csstwitter-bootstrapbootstrap-4

Is it possible to activate a block display for an article based on the class value when a radio

Here is the HTML code snippet I'm working with: <div id="contentapp"> <input type="radio" name="menu" id="interest" checked> <input type="radio" name="menu" id="about"> <div id="tab"> <label for="intere ...

htmlcss

Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

I have my own blog website: Essentially, what I am aiming for is When a user clicks on the search button, a floating semi-transparent textarea window should appear inside the designated rectangle area (as shown in the image, that red orange rectangle). ...

javascriptjqueryhtmlcss