Struggling with what seems to be a common problem, but none of the suggestions I've found so far is working. I'm working on a stylesheet for printing, the page contains nothing more then a table and one h1 tag.
The problem is that I'm getting empty white space at the top of the page, about 1/4 of the page in portrait and half the page in landscape - neither is obviously not acceptable for my users.
I've tried zeroing margins on every possible element I can think off, including body, html, table, tr and tr. Pasting the HTML and CSS below (some tags is for other HTML not found below, these are for other pages also using the same CSS for print), hopefully it's a simple fix or missing margin :)
/*Print CSS template */
body, #content, #container {
width: 100%;
margin: 0;
float: none;
background: #fff url(none);
}
#topnav, #navbar, #nav, #sidebar, .ad, .noprint {
display: none;
}
body {
font: 1em Georgia, "Times New Roman", Times, serif;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-family: Helvetica, Arial, sans-serif;
color: #000;
}
h1 { font-size: 250%; }
h2 { font-size: 175%; }
a:link, a:vis开发者_StackOverflow社区ited {
color: #00c;
font-weight: bold;
text-decoration: underline; }
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
}
/*Print CSS template END */
.r_main
{
width: auto;
padding: 0;
margin: 0;
}
table{
margin: 0;
padding: 0;
}
.r_wrap
{
margin: 0;
width: 100%;
display: block;
min-height: 30px;
float: left;
display: block;
border-bottom: 1px solid #000;
}
.r_left
{
margin: 0;
width: 300px;
color: #000;
display: block;
float: left;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_right
{
margin: 0;
display: block;
float: left;
color: #000;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_right p
{
padding: 0;
margin: 7px 0 3px 0;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_left span, .r_right span
{
display: block;
margin: 0;
padding: 5px 0 0 0;
}
.r_right ul
{
margin: 3px 0 0 15px;
padding: 0;
}
.r_right ul li
{
margin: 0;
padding: 3px 0 0 0;
}
.r_zeb1
{
background-color: #f9f9f9;
}
.r_zeb2
{
background-color: #e9e9e9;
}
HTML
<table>
<tr class="r_wrap r_zeb2">
<td class="r_left"><span>Location</span></td>
<td class="r_right"><span>'.$frm->get_location($selectedE['e_location']).'</span></td>
</tr>
</table>
Assuming that the h1 is before the table, it could be the issue. You might want to zero the margins & padding on it. It could also help to switch to 'pt' for your font-size instead of using a %.
h1{
margin:0;
padding:0;
font-size: 36pt;
}
Agree with user401183, I think its the font size
h1 { font-size: 250%; }
h2 { font-size: 175%; }
精彩评论