I need to print a page containing a large table with borders (collapsed). Mozilla seems to remove some of the borders at random in the print window. Not only on the edges, but also borders inside the table (cell borders). I tried adjusting the page margins for printing and that seems to change which borders are deleted, but I wasn't able to find any combination of margins that displays all borders.
Meanwhile, Google Chrome prints everything flawlessly. Is there anything I can do about this?
Edit: I would like to mention that in Mozilla, the borders are displayed correctly before print. This only happens when trying to print the page.
I have heard of this occurring when border-collapse is set to collapse or separate. You may need to enact a print-only style to correct this for mozilla.
I cannot help you any further without your code. To get better answers check out this article:https://stackoverflow.com/help/how-to-ask
#media print {
table{
border-collapse: unset;
}
}
Related
When building a form I have come across some weird differences in sizing and spacing between Firefox and Google Chrome.
First off, in Firefox there's a pixel difference between the first input in each column.
Moreover, text inputs have different heights, also the space between the textarea and the input below is different making it impossible to align everything properly.
But the most peculiar thing is, the textarea and text inputs have the same bottom margin, but in Google Chrome elements coming after them aren't aligned.
.input {
// ...
margin-bottom: 12px;
}
Where are these differences coming from and how should I fix them?
Update Normalize CSS doesn't fix any of this except for the one pixel difference on the top.
Code for this form: https://jsfiddle.net/jLcojhq0/2/
I have a web application that displays a grid and a chart with legend. The application has the ability to print just the summary chart or the chart with the grid data. The grid data is then parsed into a nice printable format for html instead of the table it is in.
When attempting to print this I get flawless results in chrome of course. But IE11 cuts things off at the bottom of every page. It is almost like it is trying to cut off text. About 2-3 lines of text will be cut off for no apparent reason. The amount cutoff seems to depend on where it is within a div. For example if it cuts off in a title it would just be the one line. If it cuts off in the middle of the inner box then it will cut off everything to the end of that box and move to the next section on the next page.
IE11:
Chrome:
Things I have already tried:
Removed all floating for display inline-block
Made sure overlow was always visible
changing margins in print preview of IE11
Removed all styles entirely and there was still cutoff from text.
Any help would be greatly appreciated.
So it took me several days and slowly stripping out everything. It appears that I had one element somewhere up the chain not even in the html being presented that was position:absolute. I just added:
#media print{
*{
float:none!important;
position:static!important;
}
}
and everything worked.
Floats and position absolute apparently ruin print in IE. I recommend never using position absolute for page layout.
I'm developing a website and I suddenly noticed that in IE9 nearly only layout of mine has such issue (different from other websites that I recently browsed)
There is a gray border around my page which I cannot remove.
I already have body{margin:0;padding:0;} and I tried html,body{margin:0;padding:0;} but it still continued to exist.
Here is a small screenshot
Help me remove this border please.
Those borders are from Internet Explorer itself, you can't remove them.
To remove that spaces just add this to your css:
body {
margin:0px;
}
I have a table (I use it for my main layout) with a table cell that is only 20px high. The next cell is a rowspan of 2, that contains my main content. In firefox it isnt a problem at all. It stays at 20px (It's important because it is the bottom of the logo and just above the menu). In internet explorer, the cell decides not to stay at 20px high.
I am doing eveything I can think of (stylesheet, inline style and JavaScript). There has to be a way that I can keep it from resizing depending on the content of the page.
Here is the address of the page in question: http://www.rat-pack.com/Members.php
The issue is nothing you are doing wrong, it relates to how IE handles locations and table attributes
Try the following
http://www.quirksmode.org/js/detect.html
if you use JS to detect what browser is being run, you can create a custom style sheet for each, which is how you work around browser limitations
Best of luck to you
I'm having some trouble making a site, identical to viewing it in the browser, for print. It looks good, the only thing that got me stuck is that it refuses to display backgrounds. The images are fine though, it's just backgrounds. I haven't tried setting an image as a background, but that shouldn't be necessary anyways, right?
I'm applying the background to a DIV element, with hex colors, if that matters.
Is there any way around this? I searched for it but i didn't find anyone was having the same problem.
Thanks!
By default many browsers does not print background images and colours. You need to enable that in the print options. Chrome does not have that option but to make a WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:
-webkit-print-color-adjust: exact;
Background images being printed or not is not something you can force via CSS: it's a browser's setting and most (if not all) browsers default to the 'not'.
You could try using two separate elements, for example a paragraph and an image, and then setting the z-index of the image lower than the z-index of the paragraph and then absolutely positioning the image behind your content. But I would recommend not having the background print. Otherwise you're messing with users' expectations and people will probably get annoyed.
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.