I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.
Related
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}
I'm having an issue with IE9 showing horizontal scroll bars on a printed page even though the contents of the page fit entirely. I've tried several things to remove them in my print css. Has anyone else had this issue and found a way around it?
I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.
overflow:hidden !important;
I have had this issue several times with IE in the past. It is usually a margin issue. Different browsers calculate margins differently. How are you positioning the elements? Do you have a fixed-width wrapper around the content or does the body expand to the browser width?
It's really difficult to pinpoint the problem without the actual css code.
I would suggest removing any negative margins you have (IE does not like these), and check to see if you have any right margins on elements that are unnecessary.
#media print{
.dont-print
{
overflow:hidden;
}
}
dont-print is just a class name which i've used before, changed that to whatever you need
Use following code on body tag in JavaScript function print:
printWin.document.write(
'<style>div {overflow: visible !important; height:auto !important;}</style>'
);
Are you sure you set the right stylesheet media type? Like:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />`
And try the following in your print.css:
html, body { overflow-x: hidden; }
I'm still learning how to do layouts with CSS.
After borrowing some CSS from another website to play with,
I've noticed that if I remove this from the CSS:
header {
display: block;
}
that my header will not center. If I remove this from the CSS file, the header image becomes very small and remains in the upper left corner. After reading about the display property, I can't see why it controls centering. Could someone simply/briefly explain it to me?
http://www.quirksmode.org/css/display.html
Scroll partway down the page for a detailed explanation and examples on what display: block does.
FYI: the code you posted won't necessarily do anything in browser parsing a document as HTML 4 (but will in a browser supporting HTML 5).
It states that a tag called "header" (which doesn't exist in HTML 4) should be set to display: block. Thus, one of four things will happen:
Browser will recognize it as HTML 5 and apply the style.
Browser will do an arbitrary pattern match and apply the style even though it doesn't know the tag.
Browser will do nothing.
Browser will only follow some of the CSS instructions.
EDIT: here is documentation on the new header tag in HTML 5:
http://html5doctor.com/the-header-element/
EDIT #2: Barring any other conflicting styles on the page, this will provide a centered heading.
<style>
H1 {
text-align: center;
}
</style>
<h1>Some text to be centered</h1>
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). more