Css print preview a mess!

Dev Shed Forums Sponsor:

October 12th, 2012, 02:53 PM

cdoggg94

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 41 m 31 sec
Reputation Power: 0

Homework - 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

October 14th, 2012, 02:48 PM

badger_fruit

Confused badger

Join Date: Mar 2009

Location: West Yorkshire

Posts: 760

Time spent in forums: 1 Week 4 Days 5 h 15 m 18 sec
Reputation Power: 339

I think we'd need to see your CSS code in order to figure out why it does what it does

__________________
The number for UK Emergencies is changing, the new number is 0118 999 881 999 119 7253

"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

October 15th, 2012, 01:23 PM

cdoggg94

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 41 m 31 sec
Reputation Power: 0

Quote:

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

October 15th, 2012, 01:44 PM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 644

Time spent in forums: 2 Weeks 3 Days 3 h 7 m 48 sec
Reputation Power: 400

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.

October 15th, 2012, 02:06 PM

cdoggg94

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 41 m 31 sec
Reputation Power: 0

Quote:

Originally Posted by rdoyle720

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!

Homework - Css print preview a mess!

Developer Shed Advertisers and Affiliates