Print CSS: Empty white space at top - css

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>

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

Related

how to set page/document margins with css when generating pdf from mkd via pandoc&wkhtmltopdf?

I have this script
#!/usr/bin/env bash
set -euxo pipefail
MARGIN=.35in
pandoc -t html5 -V margin-top=$MARGIN -V margin-left=$MARGIN -V margin-bottom=$MARGIN -V margin-right=$MARGIN -V papersize=letter --css ~/bin/inc/pandoc-pdf.css $1 -o $2 -s --pdf-engine=wkhtmltopdf
which nicely generates a pdf file from a markdown file...
but what's not nice is that I'm setting the MARGIN manually via commandline parameter since I couldn't get the css to do it :/
In addition to fussing endlessly over the css I've tried using alternate pandoc templates (my guessing attempts with those templates don't feel worth sharing, I'm just using pandoc's default html template). The CSS looks like:
/*
* I add this to html files generated with pandoc.
*/
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 0;
margin: auto;
max-width: 32em;
background: #fefefe;
}
a {
color: #0645ad;
text-decoration: none;
}
a:visited {
color: #0b0080;
}
a:hover {
color: #06e;
}
a:active {
color: #faa700;
}
a:focus {
outline: thin dotted;
}
*::-moz-selection {
background: rgba(255, 255, 0, 0.3);
color: #000;
}
*::selection {
background: rgba(255, 255, 0, 0.3);
color: #000;
}
a::-moz-selection {
background: rgba(255, 255, 0, 0.3);
color: #0645ad;
}
a::selection {
background: rgba(255, 255, 0, 0.3);
color: #0645ad;
}
p {
margin: 1em 0;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #111;
line-height: 125%;
margin-top: 2em;
font-weight: normal;
}
h4, h5, h6 {
font-weight: bold;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
blockquote {
color: #666666;
margin: 0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
hr {
display: block;
height: 2px;
border: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #eee;
margin: 1em 0;
padding: 0;
}
pre, code, kbd, samp {
color: #000;
font-family: monospace, monospace;
_font-family: 'courier new', monospace;
font-size: 0.98em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
b, strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
ins {
background: #ff9;
color: #000;
text-decoration: none;
}
mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
ul, ol {
margin: 1em 0;
padding: 0 0 0 2em;
}
li p:last-child {
margin-bottom: 0;
}
ul ul, ol ol {
margin: .3em 0;
}
dl {
margin-bottom: 1em;
}
dt {
font-weight: bold;
margin-bottom: .8em;
}
dd {
margin: 0 0 .8em 2em;
}
dd:last-child {
margin-bottom: 0;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
figure {
display: block;
text-align: center;
margin: 1em 0;
}
figure img {
border: none;
margin: 0 auto;
}
figcaption {
font-size: 0.8em;
font-style: italic;
margin: 0 0 .8em;
}
table {
margin-bottom: 2em;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-spacing: 0;
border-collapse: collapse;
}
table th {
padding: .2em 1em;
background-color: #eee;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
table td {
padding: .2em 1em;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
vertical-align: top;
}
.author {
font-size: 1.2em;
text-align: center;
}
#media only screen and (min-width: 480px) {
body {
font-size: 14px;
}
}
#media only screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
#media print {
* {
background: transparent !important;
color: black !important;
filter: none !important;
-ms-filter: none !important;
}
body {
font-size: 12pt;
max-width: 100%;
margin: 1em;
margin-top: 1em !important;
}
a, a:visited {
text-decoration: underline;
}
hr {
height: 1px;
border: 0;
border-bottom: 1px solid black;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
padding-right: 1em;
page-break-inside: avoid;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page :left {
margin: 35mm 35mm 35mm 35mm;
}
#page :right {
margin: 35mm 35mm 35mm 35mm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
What can I do with CSS to avoid setting MARGIN via commandline parameter?
The margin-left etc. options are just forwarded to the corresponding ones in wkhtmltopdf. But you can also set them as part of the YAML metadata:
---
margin-left: 5in
---
# hi
Some CSS to PDF processors also support this CSS, but I don't think wkhtmltopdf is among them:
#page {
size: A4;
margin: 27mm 16mm 27mm 16mm;
}
I'm just using pandoc's default html template
I don't think so, as there was no such thing until pandoc 2.11 (which was released today). Have a look at the manual's variables for HTML section.

How to increase padding around images in Jekyll

I have a Jekyll blog with GitHub pages and have an issue where images embedded in blog posts don't have any padding, meaning the text is too close to the image:
I'd like to specify the padding in the style.scss file so it's applied to all images in blog posts in the future. Where should I add a padding argument? Thank you!
---
---
//
// IMPORTS
//
#import "reset";
#import "variables";
// Syntax highlighting #import is at the bottom of this file
/**************/
/* BASE RULES */
/**************/
html {
font-size: 100%;
}
body {
background: $white;
font: 16px/1.4 $helvetica;
color: $darkGray;
}
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 10px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue;
color: $darkerGray;
font-weight: bold;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0;
#include mobile {
line-height: 1.4;
}
}
h1 {
font-size: 30px;
a {
color: inherit;
}
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
color: $gray;
}
p {
margin: 15px 0;
text-align: justify;
}
a {
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover, &:active {
color: $blue;
}
}
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ul, ul ol, ul ul, ol ol {
margin: 0;
}
ul ul, ol ul {
list-style-type: circle;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
img {
max-width: 100%;
}
// Fixes images in popup boxes from Google Translate
.gmnoprint img {
max-width: none;
}
.date {
font-style: italic;
color: $gray;
}
// Specify the color of the selection
::-moz-selection {
color: $black;
background: $lightGray;
}
::selection {
color: $black;
background: $lightGray;
}
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/*********************/
/* LAYOUT / SECTIONS */
/*********************/
//
// .masthead
//
.wrapper-masthead {
margin-bottom: 50px;
}
.masthead {
padding: 20px 0;
border-bottom: 1px solid $lightGray;
#include mobile {
text-align: center;
}
}
.site-avatar {
float: left;
width: 70px;
height: 70px;
margin-right: 15px;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
img {
border-radius: 5px;
}
}
.site-info {
float: left;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
}
.site-name {
margin: 0;
color: $darkGray;
cursor: pointer;
font-family: $helveticaNeue;
font-weight: 300;
font-size: 28px;
letter-spacing: 1px;
}
.site-description {
margin: -5px 0 0 0;
color: $gray;
font-size: 16px;
#include mobile {
margin: 3px 0;
}
}
nav {
float: right;
margin-top: 23px; // #TODO: Vertically middle align
font-family: $helveticaNeue;
font-size: 18px;
#include mobile {
float: none;
margin-top: 9px;
display: block;
font-size: 16px;
}
a {
margin-left: 20px;
color: $darkGray;
text-align: right;
font-weight: 300;
letter-spacing: 1px;
#include mobile {
margin: 0 10px;
color: $blue;
}
}
}
//
// .main
//
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lightGray;
}
.posts > .post:last-child {
padding-bottom: 1em;
border-bottom: none;
}
.post {
blockquote {
margin: 1.8em .8em;
border-left: 2px solid $gray;
padding: 0.1em 1em;
color: $gray;
font-size: 22px;
font-style: italic;
}
.comments {
margin-top: 10px;
}
.read-more {
text-transform: uppercase;
font-size: 15px;
}
}
.wrapper-footer {
margin-top: 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: $lightGray;
}
footer {
padding: 20px 0;
text-align: center;
}
// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
#import "highlights";
#import "svg-icons";
I would modify your img tag in your style.scss...
change this...
img {
max-width: 100%;
}
to this...
img {
max-width: 100%;
padding: 5px;
}
if the image has it's own DIV use this...
.imageDiv img {
padding: 5px;
}

CSS issue with top margin in safari

I can't get a top margin to show in safari. CSS works fine and the #divcontainer has a top margin and is centered in firefox and other browsers but not in safari.
I would like a 10px space to show above the container which will hold all other content.
Here is the CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}
.menu a:hover {
color: #990000;
text-decoration: none;
}
.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
overflow:auto;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}
You'll probably want to set the margin: 10px auto; on the #container. Usually, I do this:
body {
text-align: center;
padding: 0;
margin: 0;
}
#container {
width: 960px;
height: 760px;
text-align: left;
margin: 10px auto;
}
...assuming the #container div is the first element, that should work out.
You may also want to try out one of the css reset files out there.

CSS: UL Navigation - on hover, background color error

On hover the background color seems to come outside of the "boxes" that are my navigation items. I have tried tweaking everything. Here is my CSS and HTML...
<div id="menuTop">
<ul id="menuOne" class="menuHoriz">
<li>home</li>
<li>about us</li>
<li>services</li>
<li>samples</li>
<li>contact</li>
</ul>
</div>
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
}
#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}
#menuTop ul {
list-style-type: none;
}
#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}
#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}
#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}
ul.menuHoriz li {
float: left;
}
I removed the unneeded/double definitions from your stylesheet and fixed the bug.
* {
margin: 0;
padding: 0
}
#menuTop {
font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 18px;
height: 55px;
background: #000
}
#menuTop ul {
padding-top: 4px;
list-style: none
}
#menuTop li {
background: #3C87D1;
border: 1px solid #2A5E92;
text-align: center
}
#menuTop a {
display: block;
width: 197px;
line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
color: #fff;
text-decoration: none
}
#menuTop a:hover {
background-color: #5F9FFF
}
ul.menuHoriz li {
float: left
}
Here are some notes:
It is handy to set the margin and padding for all elements to zero by using *, before designing your layout.
Set the width and height for your menu item to the a element only (the most nested element). The surrounding li element will take the same size. Also use line-height instead of height because it automatically makes your text vertically centered.
Don't redefine styles in :link, :visited, :hover or :active (for example dimensions and font). It gives unnecessary calculations for the browser.
If your problem is only the color coming outside the boxes, add this to your #menuTop li
overflow:hidden;
Works for me. :)
Try this one: jsfiddle example
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
line-height: 34px;
}
#menuTop a {
float: left;
border: 1px solid #2A5E92;
background-color: #3C87D1;
width: 197px;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
background-color: #5F9FFF;
}

a bug in IE7 - body -direction:rtl

When I set the body element direction to rtl, in IE7 (compatability view in IE8), and hover over ul li, it shifts weirdly to the left by a couple of inches. A good example for this is the default ASP.NET MVC CSS (after adding direction:rtl to the body element). What is happening here?
The example code:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
direction:rtl;
}
a:link
{
color: #034af3;
text-decoration: underline;
}
a:visited
{
color: #505abc;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #12eb87;
}
p, ul
{
margin-bottom: 20px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px !important;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
margin-bottom: 30px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#footer
{
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}
ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a
{
background-color: #fff;
color: #000;
}
/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0;
padding: 1em;
border: 1px solid #CCC;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input[type="text"]
{
width: 200px;
border: 1px solid #CCC;
}
input[type="password"]
{
width: 200px;
border: 1px solid #CCC;
}
/* TABLE
----------------------------------------------------------*/
table
{
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table th
{
padding: 6px 5px;
text-align: left;
background-color: #e8eef4;
border: solid 1px #e8eef4;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.error
{
color:Red;
}
#menucontainer
{
margin-top:40px;
}
div#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#logindisplay a:link
{
color: white;
text-decoration: underline;
}
#logindisplay a:visited
{
color: white;
text-decoration: underline;
}
#logindisplay a:hover
{
color: white;
text-decoration: none;
}
.field-validation-error
{
color: #ff0000;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
I've seen lots of issues with RTL pages in all versions of IE. Recommended practice is to set the RTL direction on the HTML tage and not use the CSS direction property.
<html dir="rtl">
It's worth trying this to start with to see if the behaviour changes. Also makes sure that the page is rendering in standards mode so that you get more consistent results overall.

Resources