I'm doing some styling for a printable brochure on my client's site, which could potentially contain long unordered lists of information.
My issue is when printing in Firefox the entire <UL> will break on to a new page instead of it's children <li>'s splitting, which means it doesn't flow with other content on the page.
I've found the CSS property page-break-inside is only supported in Opera and IE8, does anyone know of an alternative to this property or another method that I can use to prevent the entire list breaking on to a new page.
Cheers!
UPDATE [23.11.2011]:
I was able to use a work around on my issue, as the printed document is generated in response to a user's selection so this page is only ever going to be print I (very reluctantly) pushed semantics aside and removed the UL and replaced LI's with DIVs, which break correctly. The question still stands though, for anyone with a similar issue but using the same HTML for print & screen.
I will reproduce the problem I was having and post the necessary HTML & CSS as soon as I can.
Consider programmatically removing the UL tags for the print version. You should be able to get the LI elements to display the same with some styling.
JavaScript or even jQuery can handle this easily enough but I bet you could take care of this server side instead.
I know it's not technically valid HTML but sometimes you have to bend the rules when HTML/CSS doesn't offer you flexibility.
Credit goes to david walsh blog
#media screen {
.page-break { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
#media print {
.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
For slightly better browser support you could use this:
ul li {
page-break-after: avoid;
}
ul li:first-child {
page-break-after: auto;
}
Should work in IE7 too. But won't work in Firefox. Browsers just suck when it comes to printing.
Related
I would want show the page number at the bottom of my printable document. I found a source and follow an stackoverflow answer here but it does not help.
My current CSS to achieve this desire is like this:
body {
text-align: justify;
}
/* class to break into new page */
.pagebreak { page-break-before: always; }
#media print {
body {
font-size: 18px;
}
#bottom-right {
content: "ទំព័រទី " counter(page) " នៃ " counter(pages);
}
However, when I test print document, it does not show my page number at all.
What was wrong to my css? How can I do to achieve this result?
Thanks.
Edited
After I spent sometimes searched through this, I know of most major browser not support this #bottom-right. Any thought of it?
As of 12/3/2015, the margin boxes like #bottom-center don't appear to
be supported by the major browsers, as shown here. If you search for
"#bottom-center" you'll see a whole lot of red "not supported" boxes.
When you search the web it sounds like they should work but in reality
they're not supported yet. Some elements of paged media work great,
like page-break-after, but not the margin boxes. Source
However, there seems to be a solutions that works in Firefox.
I've been turning the web upside down for the past hour or so but can't seem to find the solution for my rendering problem.
I'm using Rotativa (1.6.4) as the PDF creation library which was capable to reproduce the HTML I threw at it with almost 100% accuracy. Why almost; because it seems that charts I'm converting to PDF cause problems when chart doesn't fit the page and it should be transferred to the next page. Check the screenshot for more details.
As can be seen from the screenshot one chart is overlapping which happens for, to me, unknown reason.
I tried adding suggested page breakers but without any help:
.page-breaker {
display: block;
clear: both;
page-break-after: always;
}
Wrappers around charts have the following CSS rules:
.chartContainer {
float: left;
clear: both;
width: 100%;
height: 350px;
margin: 20px auto;
page-break-before: always;
page-break-after: always;
}
Not only does the PDF generated by Rotativa render incorrectly, the same thing goes for print preview in Chrome. So, the problem obviously is somewhere between page breaks and CSS - but the solution is still out there.
Any help would be appreciated.
Forget about adding page-break-before or page-break-after. The solution is to add page-break-inside: avoid !important rule. Rule should be added to the container/wrapper of the elements that could get broken in page break.
Whatever i've tried, it was not working. I found that page css contains
body{ display: -webkit-box; }
when I comment this line, page-break-* starts to work.
I have a large menu built from lists.
It is displaying correctly in all the modern browsers I have tried and IE8, however in IE7 the list items appear to be given large amounts of margin of varying size depending on the size of the list item (see image comparison below):
Unfortunately the debugging tools in IE7 are less than optimal and I am having a real hard time working out where the issue is coming from. The source code is a bit lengthy to post here so I have made a JSfiddle for your viewing pleasure.
View source code and working demo
Can anyone see where this mystery spacing is coming from, and how can I put it straight?
In IE7 the <ul> tags are inheriting a line-height : 1.5em, disabling it in ie7 removes the annoying spacing. Updated fiddle
This condition is the culprit
ul {
/* line-height: 1.5em; */
list-style-position: outside;
}
Additional
Ok I see what you mean about the white gap. This looks like its (surprise surprise) one of those annoying ie7 'features'. I just got round it by using a hack
ul li, ul li a {
/* Needed in ie7 to stop list items expanding vertically
*line-height:1.2em;
}
with
* html ul li a {
height:15px;
}
or
ul#map > li > a.map-item {
height:auto;
*height:15px;
}
Fiddle with no spacing in IE7
A better way would be to create an IE7 only stylesheet and declare this as standard rather than relying on a hack.
Have you tried adding CSS to reset all the styles to the same for all browsers?
By including a reset CSS file such as: http://meyerweb.com/eric/tools/css/reset/ may help with your issue.
In my web page, there are some items listed like this, Item 1Item 2item 3 I am wondering, it is taking much space in IE7(I haven't checked it yet on other versions of IE browsers) whereas in FF and Chrome it is fine. I have given "list-style-type: none" in my CSS. Still cant guess why it is taking space. Please help.
Link Normalize CSS in your HTML page and your page should render the same in all major browsers.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Edit:
There can be an issue with the margin and padding, keep it to 0-
ul, li{
margin: 0;
padding: 0;
}
This one worked for me:
li { display:inline; }
Normally I'm able to fix my HTML errors by myself since it's not that complicated, but this time, I'm having a hard one.
I decided to change my navigation on my website and most of it works well & most browsers displays it correctly.
Where my problem is tho, is that I have a 5-6px margin I cannot find where is coming from. The link & image showing my problem will be below.
My second problem is that IE7 shows a huge margin, and again, I cant spot where it's coming from.
The webpage URL is: Deaglegame.net & below here is the image:
I'm leaving for work in a couple hours, so if I dont reply it's not because I dont wanna reply, I'll check this thread as soon as possible, but any help is greatly appreciated!
Thanks to anyone willing to help!
The IE7 Issue is due to compatibility view. This will be forced on you by default if you are visiting the page through an intranet address. You can get around this issue by dropping the bottom padding and setting the height to 175px: for the main div. This also seems to fix the margin issue when running compatibility view.
You menu item list is somehow causing the margin issue outside of compatibility view, I would suggest when running IE to hit F12 and that should open Developer tools, that is how I found these settings that needed to be adjusted.
#Mmerrell's fix for div#main should sort one half of the issue. Next comes #Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.
/* deaglegame.css (line 48) */
#navigate li:hover a span,
#navigate li.hover a span,
#navigate li.active a span {
/* removed padding: 12px 0 0; */
}
/* deaglegame.css (line 30) */
#navigate li a span {
cursor: pointer;
float: left;
height: 38px;
line-height: 2.5;
/* removed padding: 12px 0 0; */
position: relative;
}
Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.
You may want to consider using YUI CSS reset in the future (or perhaps even integrating it now), http://developer.yahoo.com/yui/3/cssreset/ . I've found it helps me considerably when designing cross-browser compatible sites, and has almost eliminated weird margin or padding errors I come across.
Check the image below, which might solve your first problem. Try to specify a lesser value for the padding there. Consider using a tool like firebug to resolve this kind of issues.