#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    Css print preview a mess!


    Why is it that when I have my page open (fig.1), it's fine.

    *im not allowed to post URLS so the images are at the address's below. just remove the spaces between directories*

    (Fig.1)
    businesslore.com /images /jody1.JPG

    ...and when I press print to go into the broswers print preview, one of my Divs moves acrossed the page ? (fig.2)

    (Fig.2)
    businesslore.com /images /jody2.JPG
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    I think we'd need to see your CSS code in order to figure out why it does what it does
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by badger_fruit
    I think we'd need to see your CSS code in order to figure out why it does what it does
    the css style sheet is below..

    these are the divs used on the page:

    **this is the one thats wonky**
    <div id="fertilizerPrint">

    <div id="header">
    <div id="clientInfo">
    <div id="printPage2">
    <div id="servicesPrint">

    also the <div id="wrapper"> is used on this page.


    Code:
    @charset "utf-8"; 
    body {
     font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-style: normal; 
    line-height: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    color: #000000; 
    text-decoration: 
    none;
     margin: 0px; 
    padding: 0px; } 
    
    /*-------------classes------------*/ 
    .thTitles{ font-weight:normal; color:white; } 
    .contacted{ color:#f00e00; }
    .newTitle{ color:#000000; font-size:16px; font-weight:bold; } 
    .newTitleRed{ color:#f00e00; font-size:16px; font-weight:bold; } 
    .oldEstimateMSG{ color:#ff0000; } 
    
    /*--------------Links----------*/ 
    a:link{ text-decoration:none; color:#333333; }
     a:visited{ text-decoration:none; color:#333333; } 
    a:hover{ text-decoration:underline; color:#f20801; }
    
     /*-----------------------------*/ 
    #wrapper{ 
    position:relative;
     height:100%; 
    width:768px; 
    margin:0px auto; 
    } 
    
    #header{ position:absolute; height:148px; width:309px; left:00px; top:5px; } 
    
    #clientInfo{ position:absolute; height:297px; width:392px; left:0px; top:161px; } 
    
    #fertilizer{ position: absolute; height: 458px; width: 359px; left: 406px; top: 116px; } 
    
    #servicesPrint{ position: absolute; height: 632px; width: 768px; left: 0px; top: 414px; font-size: 10px; } 
    
    #fertilizerPrint{ position: absolute; height: 458px; width: 359px; left: 393px; top: 7px; font-size: 10px; } 
    
    #services{ position: absolute; height: 632px; width: 768px; left: 0px; top: 564px; } 
    
    #clientList{ position:absolute; /*height:480px;*/ width:750px; left:12px; top:216px; font-size: 14px; } 
    
    #listSearch{ position:absolute; height:71px; width:282px; left:481px; top:121px; } 
    
    #backToList{ position:absolute; height:20px; width:90px; left:373px; top:76px; } 
    
    #oldEstimate{ position:absolute; height:20px; width:90px; left:673px; top:47px; } 
    
    /*------------------new client----------*/ 
    
    #newClient{ position:absolute; height:20px; width:90px; top:76px; left:473px; } 
    
    #newClientForm{ position:absolute; height:421px; width:730px; left:20px; top:216px; overflow: auto; } 
    
    #newClientForm2{ position:absolute; width:740px; left:19px; top:216px; } 
    
    /*-------------delete--------*/ 
    
    #deleteClient{ position:absolute; height:20px; width:90px; top:76px; left:673px; } 
    
    /*-------------login-------------*/ 
    #header2{ position:absolute; height:148px; width:309px; left:331px; top:29px; } 
    
    #loginForm{ position:absolute; height:129px; width:309px; left:332px; top:184px; } 
    
    /*-------------------edit-----------*/ 
    #editClient{ position:absolute; height:20px; width:90px; top:76px; left:573px; } 
    
    /*-------------estimate---------------*/ 
    #endEstimate{ position:absolute; height:51px; width:126px; top:190px; left:-180px; } 
    
    #pack1Stuff{ position:absolute; height:255px; width:148px; left:443px; top:170px; }
    
     /*----------------print-----------------*/ 
    #printPage{ position:absolute; height:65px; width:50px; top:265px; left:-171px; } 
    
    #printPage2{ position: absolute; height: 40px; width: 108px; top: 352px; left: 9px; }
    
     /*-------------------email----------------*/ 
    #emailPage{ position:absolute; height:65px; width:50px; top:440px; left:-172px; } 
    
    #emailThanks{ position:absolute; height:122px; width:224px; top:221px; left:261px; } 
    
    #emailJoanne{ position:absolute; height:52px; width:126px; top:357px; left:-174px; } 
    
    /*----------No Totals-------------*/ 
    #noTotals{ position:absolute; height:65px; width:92px; top:520px; left:-171px; } 
    
    /*---------------IPAD-------------*/ 
    #midNavIpad{ position:absolute; width:390px; height:66px; top:480px; Left:1px; }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    You're positioning everything absolutely and setting heights and widths for everything. Very common for beginners, but ends up screwing a lot of things up. HTML has a natural flow from top to bottom, so take advantage of that. Use margins and/or padding to add space between elements. Then for things side by side, there are many other attributes you can use (float: left or float: right being most common and widely supported). Using the natural flow will allow things to resize and maneuver around each other, which is great for things like print, mobile devices, etc. The technique you're using makes things more pixel perfect, but much less flexible.

    ANYWAY, if you're unwilling to redo your page, you could experiment with removing widths and/or heights for the affected pages.

    If that doesn't work, I'd strongly suggest posting a link to the actual page rather than just a screenshot.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by rdoyle720
    You're positioning everything absolutely and setting heights and widths for everything. Very common for beginners, but ends up screwing a lot of things up. HTML has a natural flow from top to bottom, so take advantage of that. Use margins and/or padding to add space between elements. Then for things side by side, there are many other attributes you can use (float: left or float: right being most common and widely supported). Using the natural flow will allow things to resize and maneuver around each other, which is great for things like print, mobile devices, etc. The technique you're using makes things more pixel perfect, but much less flexible.

    ANYWAY, if you're unwilling to redo your page, you could experiment with removing widths and/or heights for the affected pages.

    If that doesn't work, I'd strongly suggest posting a link to the actual page rather than just a screenshot.
    Thanks a ton for the advice!

    I have created a username and password for the page for you access it.

    I would rather PM it to you so its not public if thats alright..

    The page is this :
    jodyslawncare.com/Mobile2/estimatePrint.php?Client=733

    ..press "print" on the page to see the error.

    Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo