Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Print CSS - Best Way to Make it Work?

    Hey All,

    Another question. I'm working on a print-specific stylesheet. When I preview, the content stretches off the right of the page. I'm fairly certain this is because the table I'm using is wider than the page. However, with the background images I'm using, I need to use a table in this instance.

    How can I make this work via CSS?

    The page is www.witchkraftracing.com/glmmrs/about.asp

    You can see the stylesheets here:

    www.witchkraftracing.com/glmmrs/styles.css
    www.witchkraftracing.com/glmmrs/stylesPrint.css


    Thanks!

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    In your print CSS you could take out the background image (more ink) and decrease the width of the table.

    Why are you using a table? I'd understand if it was some necessary hack, but your design can be done w/ CSS easily, and it's so close already...

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    How can I shorten the table via css?

    How can I make the page work without tables? Before getting into the 3 background images that are used, I still need the outer table just to ensure the page is 100% in height and that the footer element (the bottom TD tag) is always positioned at the bottom of the page.

    Then the background images. There are two that are within TD tags (the left and right fade), along with the overall background image (which wouldn't be an issue via CSS).

    I briefly tried doing it via CSS and had problems with the left/right fade images.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You can shorten the table by adding this to your print CSS:

    table {
    width: 500px;
    }

    Or whatever you want the width to be. Since it's printing you could use cm or in, too.

    About the no tables... Instead of three background images, you could use one that centers in the page. You can get away with this because it's a fixed width layout. Make a container div to hold all your stuff in, give it "position: relative". Give the html and body 100% (so it stretches the full height of the browser window), give the container 100% height (so it stretches the full height of the body and html), and position the footer at the bottom of the container using "position: absolute".

    Here's some code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<style type="text/css">
    
    		html, body	{
    			height: 100%;
    			}
    		
    		body	{
    			background: url(background.gif) repeat-y top center;
    			padding: 0;
    			margin: 0;
    			}
    
    		#container	{
    			margin: 0 auto;
    			width: 720px;
    			height: 100%;
    			border: dotted 1px #000;
    			position: relative;
    			}
    		
    		#footer	{
    			position: absolute;
    			bottom: 0;
    			}
    		
    	</style>
    	<title>example</title>
    </head>
    
    <body>
    
    <div id="container">
    	<h1>Example page</h1>
    	<p>This container, with a dotted (dashed if you are using IE) border should stretch from top to bottom.</p>
    	<p id="footer">Here is the footer.  It should be at the bottom.</p>
    </div>
    
    </body>
    </html>
    And a link to an example. Hope it helps,
    Last edited by rmedek; 01-21-2005 at 09:01 PM.

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Nice .. I'll give this a try and get back to you and let you know how it works.

    Thanks!

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    edit* negative margins...duh
    Last edited by harbingerOTV; 01-22-2005 at 06:34 PM.

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey...Edit:Why use negative margins. With your current css, you're just throwing yourself into a deeper pit of non-compatibility. try using the simple cross-browser css below. i'm confused as to why you have all that -moz- proprietary css...here's the fix for the footer:

    #footer {
    border: 1px solid black;
    background: transparent url(foot.jpg) repeat scroll 0%;
    margin-bottom: 0;
    height: 95px;
    width: 100%;
    }

    and it will behave correctly. no need for absolute positioning or any of that other stuff...the 95px height was just a random guess at the height of that image and it looked correct when tested...you can correct it if its not
    Last edited by Jalenack; 01-22-2005 at 06:37 PM.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Jalenack,

    I just used rmedek's example as the base.

    You fixed it up with that.

    *edit

    to what i was talking about before the edit. http://harbinger.reefcrazed.com/test/extra.html

    just plugged in some images into rmedek's code.

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you still have that margin at the bottom dont use absolute positioning..
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The absolute positioning is there to keep the footer at the bottom of the page when the page's content isn't enough to fill the page. The page is set at 100%, so if there was no positioning, if the content only filled half the page, the footer would be in the middle, and there would be half a page of empty background images.

    If the footer is, say, 95px tall all you have to do is add 95px of margin at the bottom to make room for the footer (since it's absolutely positioned, it's out of flow and therefore would cover up any part of the content that stretched past the page if the margin wasn't there).

    Hopefully this explains things a little more...

  • #11
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Minor note - in doing the above, the scroll bar is always there and always moves just a hair - even without any content to cause the page to have to scroll.

    Minor I know, but ideally the scroll bar shouldn't be showing ..

    Hmm ..

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Did you take out the extra padding and margin in the body and html?

    That's the tricky thing about using this method to get the footer at the bottom... if you apply 100% height to the page, the actual page height is the height PLUS margins, padding, and border (remember the box model?). So it gets a little wacky sometimes.

    One sneaky way out of it is to apply a background image of the bottom of the column to the footer, then no matter where the footer is it still looks good. Just an idea... you can see it on a page I'm working on...

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Jalenack,

    No, it's not like that anymore. The link still goes to the example. I used your fix and it all works right.

    rmedek,

    I hopped on this thread since your example was in here. The link to kraftomatic's page didn't work for me so I didn't have a visual example of his question. I just was up and thought I would plug my stuff into your example to see if it would work for what I was doing..

    Between the both of you I fixed a problem that was bugging me for a day or so. So far so good.

  • #14
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    On a bit of a tangent, with a background image, can you specify that you want that to be printed? By default, background images don't print.

    Thanks.

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hmmmmmrrrr... I don't know. I don't think so, maybe someone has a better solution. Usually I take out most images when I print, so I've never run into that problem...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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