I have a horizontally lengthy page with table format, when I am trying to do a print preview in chrome half of the page are cutoff, but firefox rendering fine what I want looking for(auto shrink and fit to page). Any css solution is appreciated.
You could try creating a custom print stylesheet for your site and setting the width of the body to 100% like this:
body {
width: 100%;
}
See this site which has info on making a custom print CSS file.
Related
As you can see from the image below, the browser (both Chrome and Firefox) insists on applying width:24px / height 24px for the icon.
However, I have already changed the values on the CSS file. In fact, if you click on the file the browser says the width/height are coming from, the browser inspector itself show the updated values of width:150/height:40, as the image below shows.
So basically the inspector is contradicting itself! I can't solve this clearing the cache.
Any ideas on what is going on? Could it be related to this being a .scss file?
You can check it live here: https://www.chatbotforums.com/ . I am trying to change the size of the Facebook login icon, inside the "Welcome" box.
Your banner is overflowing. You will have to modify the CSS for the box container and then the icon.
Modify width and height style to min-width and min-height.
img {
min-width: 250px;
min-height: 250px;
}
<img src="https://www.google.ca/images/branding/product/ico/googleg_lodp.ico">
Solved it.
For some reason the browser inspector was saying that the width/height were being pulled from the _style.scss file, but that was not the case.
They were being pulled from another file, the standard style.css, so I had to tweak the values there instead.
Strangely this incorrect information appeared on inspectors of both Chrome and Firefox.
I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.
When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.
I've tried the following for the print media queries (with no effect) -
Setting a min-height
Setting any variation of a height value on the container
Zooming out and printing
Changing resolution / scale
Nothing appears to have any effect at all.
Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.
Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.
I've had many issues with cross browser print media queries in the past. What helps a lot with regulating the visual is setting a fixed page size and html/body.
For instance:
#media print {
#page {
size: 1600px;
}
body,
html {
width: 1600px;
}
}
In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.
I've been working with modified version of PDFJS viewer from PrimeFaces
and here is a snippet that did the trick in Safari:
#page {
size: A4;
margin: 0;
}
html, body {
width: 210mm; // A4 Paper width
height: 100%;
}
note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.
Hope it helps somebody, who uses PDFJS extension from PrimeFaces.
I've not gotten any answers on here after pointing out the issue in the comments above and mentioning it was a free bounty. Unfortunately I'd love to give the bounty away so anyone that reposts this before bounty expires can have it -
The issue was that the application I am using is a JavaScript app that runs and creates the body of the page that was only about 400px tall. After the body is rendered there is a separate bootstrap modal dialog that was being shown with the content to print and all of the CSS was good and media queries were good but the modals' content was set to larger than the body.
Upon inspection it seems that Safari (and probably other browsers) weren't taking in to account the dialogs height when calculating the height of the body.
Chrome and Firefox were fine with this because it printed all visible content but in Safari it only prints content that is as tall as the body, which in this case was about 30% of the modal. By manually triggering the body to be min-height: 1200px; it resolved the issue since that was the maximum possible height of the Bootstrap Modal dialog's content.
I use Twitter Bootstrap for my website but also AD Gallery as Image Gallery (http://coffeescripter.com/code/ad-gallery/).
I have several tabs made with bootstrap on my page, the gallery is on the second tab. I found out, that there is a problem with IE 9 (it works in Firefox and Chrome) to not show the images in the gallery.
I debugged this and found out that this is due to a css command in the Bootstrap reset:
img {
height: auto;
}
If I remove this line, everything works fine also in IE9.
I don't want to remove this line completely but override it in my own CSS for this specific gallery div. The funny thing is, that "auto" is already the default value for this attribute.
So how can I reset it to "not set" as it is, if I comment out this line in Bootstrap?
Checking the IE9 default stylesheet confirms img height is not set to anything, which to me implies auto so this is strange.
Does height:inherit work? Edit: No it does not.
http://fiddle.jshell.net/bTtKT/show/
If I print the above page in Chrome as A4 Landscape I get two pages as expected given the size of the canvas on the page, if I do the same in Firefox however (with print preview for example), it gives me only one page and therefor cuts the image/canvas in half. If I change the scale in Firefox however I do start to see the whole image (but then it's too small), so the image is there as a whole but Firefox seams to ignore that its bigger then one page for some reason.
How do I get Firefox to recognize that the image needs more then one page so I can print the whole thing in correct size?
(possible to edit the above page example here: http://jsfiddle.net/bTtKT/ )
I didn't try it out, but you could try:
canvas { page-break-inside: avoid; }
See: https://developer.mozilla.org/en/CSS/page-break-inside
Putting this style on the div encompassing the canvas might help ya:
page-break-inside: avoid
clear: both
float: none
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.