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
Related
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.
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.
Please have look at this page & its source code.
http://www.chemfluence.org.in/monetarist/index_copy.php
Web page is not showing from top of the web page. There is a gap of around 10px from top of the browser.
I have higlighted the gap in above image.
Could you please anyone tell me how to display the page from top 0px ?
Chrome has a default margin of 8px built into the browser, in your CSS use:
body{ margin: 0 }
It's always handy to use some sort of CSS reset, to prevent inconsistencies like the above between browsers.
Something like this: http://meyerweb.com/eric/tools/css/reset/
This is because you haven't explicitly set a margin for the body of your document and some browsers then use a default one.
To fix that, add something like this to your CSS stylesheet:
body {
margin-top: 0px;
}
The default browser style sheets add a margin to the body Tag, so you have to set the margin of the body to 0:
html,body {margin:0;}
By the way, you should not use a table as a layout grid.
I am using TCPDF's writeHtml function for a page that renders properly in the browser.
In the output PDF, the fonts are too small. I've tried with setFont, but it doesn't seem to have an effect. Does anyone have experience with this?
I'd like to add here that the HTML is not always in my control, so I would prefer to do this with TCPDF options(and not by modifying the source html)
UPDATE: I am able to change the font size by setting it on the body. The only remaining problem is that, to render correctly in the browser, it needs to be 12px. To render correctly in the PDF, it needs be something like 30px. Do I set the media on the css? What is the media type for TCPDF?
Are you using tags? tcpdf's HTML engine gives the tag precedence over any CSS, or other size-adjusting tags. If you remove any extraneous tags from the HTML and use straight CSS, things should render as expected. Or, if you aren't using CSS, you should. Just because a browser displays it correctly doesn't mean it will look the same on other formats. The browser has likely performed some magic of its own to fill in the gaps in your CSS specifications.
UPDATE
Here's an example of specifying CSS declarations with your HTML when using tcpdf. Note how all the styling is applied using the CSS declarations inside the <style> tag outside the actualy HTML body.
<?php
$html = <<<EOF
<!-- EXAMPLE OF CSS STYLE -->
<style>
h1 {
color: navy;
font-family: times;
font-size: 24pt;
text-decoration: underline;
}
p {
color: red;
font-family: helvetica;
font-size: 12pt;
}
</style>
<body>
<h1>Example of <i>HTML + CSS</i></h1>
<p>Example of 12pt styled paragraph.</p>
</body>
EOF;
$pdf->writeHTML($html, true, false, true, false, '');
?>
The best solution that worked for me was to replace 'px' to 'pt' in html code:
$tidy = str_replace ('px', 'pt', $tidy);
Before on the left side and after replacing on the right:
TCPDF recognizes basic CSS such as font-size, font-color, and font-family.
For a little more information, check out TCPDF not render all CSS properties
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 ; }