CODEWITHSUNDEEP
cssprintinghtml-table
Index
Index

Reputation: 2381

Print CSS: Empty white space at top

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:visited {
   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>

Upvotes: 3

Views: 4967

Answers (2)

Bishoy Hanna
Bishoy Hanna

Reputation: 4589

Agree with user401183, I think its the font size

h1 { font-size: 250%; }
h2 { font-size: 175%; }

Upvotes: 1

user401183
user401183

Reputation: 2570

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;
   }

Upvotes: 1

Related Questions