I have created a series of .html documents that have a footer appearing at the end of each printed page, without showing up on the screen. I also have the page breaks explicitly declared, so that they fall in non-disruptive places. This is done using the CSS combination of:
#media screen {
.bottom, .split {
display: none;
}
}
#media print {
.bottom {
display: block;
text-align: center;
width: 8in;
position: fixed;
bottom: 0;
}
.split {
page-break-before: always;
}
.whole {
page-break-inside: avoid;
}
}
The bottom class is used for the footer, the split class for the page breaks, and the whole class for data tables, so that they're not split in the middle. This works quite wonderfully when printing the individual documents via the browser's print command.
However, these documents have to be ran through a batch script that generates PDF copies of them for some other business processes (PHP using DOMPDF). Initially, none of the #media print CSS references were recognized. Then I changed the DOMPDF_DEFAULT_MEDIA_TYPE to "print", and it started recognizing the page breaks, but still refuses to print the footer. Again, the footer prints out just fine when printing directly from the browser.
I need to rectify this issue ASAP. Any input would be appreciated.
EDIT: I have confirmed that the HTML in the documents validates against HTML5 standards.
Looking at the source it looks like dompdf is pretty much slurping up styles for all media types except the default (or something like that ... I'll have to look at the code a bit more to see whats really going on).
case "media":
$acceptedmedia = self::$ACCEPTED_GENERIC_MEDIA_TYPES;
$acceptedmedia[] = $this->_dompdf->get_option("default_media_type");
$media = preg_split("/\s*,\s*/", mb_strtolower(trim($match[3])));
if ( count(array_intersect($acceptedmedia, $media)) ) {
$this->_parse_sections($match[5]);
}
break;
[ref]
You didn't specify the version you're using, but in 0.6.2 (the last version to use the configuration file. I'd say try using a combined media selector like #media print,dompdf to get dompdf to recognize the print styling.
Related
I have a PHP page that I need to print. I managed to remove unwanted elements from printing with a print stylesheet (print.css) below. However it does not remove browser generated header, page numbers, URL and date. I am using bootstrap framework. bootstrap.min.css does not have any '#media print' sort of thing. Need some better CSS ideas to achieve this. Thank you.
/* Remove unwanted elements */
/* Assign class="noprint" in the HTML. Header and navigation (<div id="header"> and <div id="nav">) */
#header, #nav, .noprint
{
display: none;
}
/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}
/* Remove links */
a:link, a:visited, .navbar-link
{
display: none;
}
In a browser like chrome, when you try to print the page (Ctrl+P) it will open a dialog box.
In this box you have to select "More definitions" or something similar and then, uncheck the option of headers.
Other browsers, must have a similar way.
As far as I am aware you can not change this via css however when you bring up your browsers print dialog it should present you with an option to exclude headers and footers (i.e. page number and url).
Is not possible to remove the browser's default strings. You can achieve in Internet Explorer exploiting the "features" (also knows as bugs) that they provide you, but in the rest of browsers you can't.
My web page is having a top margin.
I cannot get rid of it. I tried
html {
margin:0px;
}
body {
margin:0px;
}
Try to Call Suitable reset css
Reset CSS
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.
hi lot of css elements have default margin and padding , always use reset css
add following code in your css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
or refer below link
http://www.javascriptkit.com/howto/nomargin.shtml
I'm trying to use window.loaction.replace() and discovered unwanted behavior.
The redirect works fine but it messes up my html structure.
It redirects to the wanted site but the top panel becomes a ghost. As far as I can tell the body structure behaves like it has a "negative margin the size of the panelheight". If I double the size of the panel with firebug it comes down.
The whole page looks like there is no panel at all after redirecting.
redirector: function(e){
window.location.replace(e);
}
The top panel is a nav element containing to ul's from which the right one is floated right. It is not fixed:
.panel{
display: block;
height: 42px;
position: relative;
z-index: 9998;
}
Even after manually reloading the page the bug doesn't disappear.
EDIT:
Same problem occurs if i redirect with PHP header: location...
The complete html,body moves up.
If I had to describe this bug in css it would look like:
html{
height:100%
position: absolute;
top:-40px;
bottom:40px;
}
Maybe it's useful for someone else:
The problem occurs if the calculated height of the content inside the body,html tags is higher than the body,html itself.
If the html,body have 100% height and inside the body are for example three elements:
Top Navigation Panel
Content Wrapper
Footer
And the calculated CSS height for these three element is higher than the body height it leads to this problem.
I don't know why it does only show up after a redirect but not if I navigate through links.
I'm working with Embarcadero's RADPHP XE2 and a page I want to build has some text at the top (multiple lines) as a label, and below that a PageControl component - despite the page being set to be more than tall enough, when debugging and viewing in Internet Explorer there are no scrollbars and it chops the bottom of the page off.
Has anyone found a work around on this?
I could not get scroll bars in my browser although the page is larger than the window.
Now fixed by adding this
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
to my css file.
To load my css file into the Page I put my tags into a text file including
<link rel="stylesheet" href="/css/mainstyle.css" type="text/css">
then load the text file into the page my putting
$head = file_get_contents('defaulthead.txt');
echo $head;
into the OnShowHead event of the page.
The solution by Les Kaye did not work for me.
For some reason, the script /rpcl-bin/qooxdoo/framework/script/qx.js does overwrite my stylesheet by inserting following CSS at runtime:
html,body {
width:100%;
height:100%;
overflow:hidden;
}
So what I simply did is using the !important rule. It is not clean, but the behavior of qx.js is not clean either. There should really be a Form property where the user can define if the page scrolls or not.
/* Overwrite the values which are enforced in /rpcl-bin/qooxdoo/framework/script/qx.js */
html {overflow-x:scroll !important ; }
html {overflow-y:scroll !important ; }
html {overflow:scroll !important ; }
i have a button in html that has a background image and text overtop of it, how can i disable the selecting of that text so it looks more "seamless"?
echo '<td width="130" height="30"'. "onClick='document.location = ".'"'.$value.'";'."'><center>".$key."</center></td></a>";
Use this css:
#defaultPointer{
cursor:default;
}
for this div:
<div id="defaultPointer">
<p>
hello world
</p>
</div>
Just a sample, but it should totes McGoats make it more seemless. I've done the same with a site before.
In your case you'd probably just add the id to the td you've got there.
Hope this helps.
Two ways of doing this
- Render the text as image as we have email in Facebook
- Overlay it with a Div with semi transparent image as a background
If I have understood your question correcty, you want it to behave like a button, just add to your "td" a style:
style="cursor:pointer;"
To style the mouse pointer, you need to use the cursor CSS style.
.normalpointer {
cursor:default;
}
This works in all browsers. (There are some pointer types that can be styled which do have cross-browser issues in older browsers, but default definitely works everywhere)
Disabling the ability to select text is slightly more complex: you need to do a few things, because browser support is varied.
For browsers that support doing it via CSS, you need the following:
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
ie user:select:none; plus a bunch of browser-specific variants on the same. Some of those browser-specific variants can probably be dropped now, as support has improved, but if you keep them anyway, you'll be able to support people who haven't upgraded their browsers in a while.
I believe the above also works in IE9, but older versions of IE definitely don't support it. For those, you need to add the following attribute to the element you want to make unselectable: unselectable="on"
Thus, an unselectable div in all browsers would look like this:
<div class='unselectable' unselectabnle='on'>....</div>
(with the class referencing the stylesheet above)
An alternative to the user-select CSS style would be to use ::selection CSS. This allows you to style how text looks when it's selected. You could use this for example to set the selection text to look the same as normal text, which would allow the text to still be selected, while not being actually visibly changed:
.myclass::selection {
background: transparent;
}
again, you may need some vendor-specific stylesheets for to support older versions of some browsers -- eg:
.myclass::-moz-selection {
background: transparent;
}
Hope that helps.