Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: CSS and Printing!

  1. #1
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default CSS and Printing!

    I have did all I could, but still to no avail, so I'm hoping that someone in here could shed some light on this odd behavior.

    The thing is that I am using CSS Print to control what is printed for the site visitors.

    On this page here:

    http://www.froso.dk/test/produkter/bordplader.html

    This is an example page, as there are more pages with many thumbnail images on them.

    Anyway!

    My problem is that when I print the above page, the first page printed is blank, and only on the next page the thumbnail images show up.

    How do I fix this?


    Cheers,
    Bassa

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Here is a great tutorial about writing a print stylesheet:
    http://css-tricks.com/video-screencasts/52-building-a-print-stylesheet/
    It has many useful tricks that might help you out.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    No help to get there.


    Cheers,
    Bassa

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Well I printed your page and everything fit on one page, no blank page, no problems. Maybe it has to do with your printer settings?

    I posted that tutorial because the same problem occurred and it was fixed be removing the menu. You could try removing some stuff until you find what's causing the blank page, but like I said, I don't have that problem.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Alright, thanks. I'll fiddle around with it some more and see what's going on.


    Cheers,
    Bassa

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    These styles seem to work fairly well for the print stylesheet for that page:

    Code:
    body {
    margin:0;
    padding:0;
    }
    div#fade {
       display:none; 
    }
    
    div#topbg, div#main{
       display:none; 
    }
    
    div#logo {
       display:none;
    }
    
    .header {
    	display:none; 
    }
    
    a.frontpage_on {
    	display:none;
    }
    
    a.frontpage_off {
    	display:none;
    }
    
    a.products_on {
    	display:none;
    }
    
    a.products_off {
    	display:none;
    }
    
    a.gallery_on {
    	display:none;
    }
    
    a.gallery_off {
    	display:none;
    }
    
    a.about_on {
    	display:none;
    }
    
    a.about_off {
    	display:none;
    }
    
    a.contact_on {
    	display:none;
    }
    
    a.contact_off {
    	display:none;
    }
    
    div#image {
    	display:none; 
    }
    
    div#breadcrumb {
    	display:none; 
    }
    
    div#maincontent {
    	display:none; 
    }
    
    div#submenu {
    	display:none; 
    }
    
    div#maincontent {
    	display:block;
    	background: white;
    }
    
    .h1 {
    	width: 708px;
    	height: 1.0em;
    	margin: 0 0 10px 0;
    	font-family: Georgia;
    	font-size: 1.5em;
    	line-height: 2.0em;
    	color: black;
    	text-align: left;
    }
    
    #textarea {
    	width:100%;
    	margin:auto;
    }
    
    .text {
    	font-family: Verdana;
    	font-size: 0.875em;
    	color: black;
    	line-height: 1.3em;
    	text-align: left;
    	padding: 0px;
    	margin: 0px;
    }
    
    .link {
    	display: none
    }
    
    .link:hover {
    	display: none
    }
    
    .thumbnail {
    	height: auto;
    	width: 160px;
    	float: left;
    	text-decoration: none;
    	margin: 0px 10px 0 0px;
    	padding: 0px;
    	text-align: center;
    }
    
    .thumbnailtop {
    display:none;
    }
    .thumbnailcenter {
    	height: auto;
    	width: auto;
    	text-decoration: none;
    	padding: 0px;
    	background:none;
    }
    .thumbnailcenter img {
    width:91px;
    height:91px;
    }
    .thumbnailbottom {
    	height: 1em;
    	overflow: hidden;
    	width: 91px;
    	text-decoration: none;
    	font-size:65%;
    	margin: 0px auto;
    	padding: 0px;
    	background: none;
    	line-height: 1em;
    	font-weight: bold;
    }
    
    fieldset div {
    display:none;
    }
    form {
    display:none;
    }
    label {
    	float:left;
    	width:10em;
    	text-align:right;
    	margin-right:1em;
    }
    legend {
    	color:#B41414;
    	font-size:1.0em;
    	font-weight: bold;
    }
    legend span {
    	width:10em;
    	text-align:right;
    }
    input {
    	padding:0.15em;
    	width:10em;
    	border:1px solid #B4B4B4;
    	background:#F0F0F0;
    	-moz-border-radius:0.4em;
    	-khtml-border-radius:0.4em;
    	font-family: Verdana;
    	font-size: 1.0em;
    }
    input:hover, input:focus {
    	border-color:#B4B4B4;
    	background:#FAFAFA;
    } 
    fieldset {
    	border:1px solid #DCDCDC;
    	padding:0em 1em 1em;
    }
    
    input.default {
    	color:#bbb;
    }
    #submitall {
    	margin-top:1em;
    	width:55px;
    	height:22px;
    	border:0;
    	background:url(../images/button_submit_off.gif);
    	display:block;
    	cursor:pointer !important;
    	cursor:hand;
    	margin-left: 10.5em;
    	float: left;
    	padding: 0px;
    }
    #submitall:hover {
    	margin-top:1em;
    	width:55px;
    	height:22px;
    	border:0;
    	background:url(../images/button_submit_on.gif);
    	display:block;
    	cursor:pointer !important;
    	cursor:hand;
    	margin-left: 10.5em;
    	float: left;
    	padding: 0px;
    }
    
    
    #clearall {
    display:none;
    }
    
    #footer {
    	height: 20px;
    	width: 100%;
    	text-align:center;
    	font-family: Verdana;
    	font-size: 0.875em;
    	margin: 0px auto;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    Note, these probably could be simplified.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    LOL! Yeah, I know it's ridiculously long, but that's just the way I managed to work my way through the print.css document.

    It aint pretty, but it works... well, sorta!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    It's unclear to me whether or not you have realized that the styles in my previous post are significantly different than the print styles you were currently using when I posted it. If not, give them a try.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    /Facepalm!

    Sorry, man. I didn't pay enough attention but thought you had just copied in my own print.css.

    I'll definitely give your solution a shot, thanks!


    Cheers,
    Bassa

  10. #10
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Well, that seems to work except that the thumbnail images gets horizontally squashed - including the thumbnail image names (regular text).

    Also, what are these two lines?:

    Code:
    input {
    	padding:0.15em;
    	width:10em;
    	border:1px solid #B4B4B4;
    	background:#F0F0F0;
    	-moz-border-radius:0.4em;
    	-khtml-border-radius:0.4em;
    	font-family: Verdana;
    	font-size: 1.0em;
    }

    Cheers,
    Bassa

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •