Solved

Web page Print & Print Preview overlapping text

Posted on 2010-11-09
5
2,168 Views
Last Modified: 2012-06-21
Hi all. I have a page that I'm having trouble printing. If you check out this page:

http://vendortest.amieelynn.com/Print_Spec_Sheet.asp?Auto=170&Lic=Gem+Bella&Print=170&PrintChoice=Print_Spec_Sheet.asp&Print2=Print

Do a Print Preview (or click the "Make PDF or Print" button on the top left) & you will see that the "Description" line overlaps when it is too long. I need to print this using IE because parts of the site use ActiveX (although all other browsers overlap anyway). Can anyone help? My coding is below.

PS - I already tried changing the font to a bunch of other ones.

Thanks in advance.
Jon
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>


<!--#include file="Connections/VendorIncVB.asp" -->
<%
' Add the button to the page
' Check to make sure querystring button is not set to hide
If Request.QueryString("button") = "" Then
    %><!-- #include file="SpecButtonInc.asp" --><%
End If
%>

<%
Dim StyleInfo__MMColParam
StyleInfo__MMColParam = "1"
If (Request.QueryString("Print") <> "") Then 
  StyleInfo__MMColParam = Request.QueryString("Print")
End If
%>
<%
Dim PrintSheet
Dim PrintCount
PrintCount = 0
PrintSheet = Split(StyleInfo__MMColParam,",")
%>
<%
For Each item In PrintSheet
%>

<%
Dim StyleInfo
Dim StyleInfo_cmd
Dim StyleInfo_numRows

Set StyleInfo_cmd = Server.CreateObject ("ADODB.Command")
StyleInfo_cmd.ActiveConnection = MM_VendorVB_STRING
StyleInfo_cmd.CommandText = "SELECT * FROM dbo.Style WHERE Auto = '"& PrintSheet(PrintCount) &"'" 
StyleInfo_cmd.Prepared = true
'StyleInfo_cmd.Parameters.Append StyleInfo_cmd.CreateParameter("param1", 5, 1, -1, StyleInfo__MMColParam) ' adDouble

Set StyleInfo = StyleInfo_cmd.Execute
StyleInfo_numRows = 0
%>
<%
Dim LicenseLogo__MMColParam
LicenseLogo__MMColParam = "1"
If (Request.QueryString("Lic") <> "") Then 
  LicenseLogo__MMColParam = Request.QueryString("Lic")
End If
%>
<%
Dim LicenseLogo
Dim LicenseLogo_cmd
Dim LicenseLogo_numRows
Dim LicenseName
LicenseName = (StyleInfo.Fields.Item("License").Value)

Set LicenseLogo_cmd = Server.CreateObject ("ADODB.Command")
LicenseLogo_cmd.ActiveConnection = MM_VendorVB_STRING
LicenseLogo_cmd.CommandText = "SELECT * FROM dbo.Licenses WHERE License = '"& LicenseName &"'" 
LicenseLogo_cmd.Prepared = true
'LicenseLogo_cmd.Parameters.Append LicenseLogo_cmd.CreateParameter("param1", 200, 1, 25, LicenseLogo__MMColParam) ' adVarChar

Set LicenseLogo = LicenseLogo_cmd.Execute
LicenseLogo_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spec Sheet</title>
<script type="text/javascript">
function popImage(imageURL,imageTitle,pos,AutoClose,CopyRight){
	//Safari workaround
	is_safari=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1)?true:false;
	safari_version=Number(navigator.userAgent.substring(navigator.userAgent.indexOf("Safari/")+7));
	if (is_safari && safari_version<300){
		var f="top=0, left=0, width="+screen.width+",height="+screen.height+" ,scrollbars=yes";
		imgWin=window.open(imageURL,'im',f);
	}
	else{
		//Based on browser set correct resize mode
		if (parseInt(navigator.appVersion.charAt(0))>=4){
			if (navigator.appName=="Netscape" || is_safari){
				var f="width="+screen.width+",height="+screen.height;	
				var rs="var iWidth=window.innerWidth;iHeight=window.innerHeight";
				var adj="0";
			}
			if(document.all){
				var f="width=150,height=150";	
				var rs = "var iWidth=document.body.clientWidth;iHeight=document.body.clientHeight;";
				if(typeof window.opera != 'undefined'){ 
					 var adj="window.outerHeight-24";
				 }
				else{
					var adj="32";
				}	 
			} 
		}
		//
		v=pos.substring(0,pos.indexOf("_"));
		h=pos.substring(pos.indexOf("_")+1);
		f+=",left=0,top=0";
		imgWin=window.open('about:blank','',f);
		imDoc=imgWin.document;
		with (imDoc){
			writeln('<html><head><title>Loading...</title>');writeln('<sc'+'ript>');
			writeln('var sdstr=\"\";window.onerror=function(){return true;}');
			writeln('function resizeWin(){');
			//If the image size is bigger then screen resize window to the screen size
			writeln('sc=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1)?15:"";');
			writeln('iW=document.images[0].width;iH=document.images[0].height;sW=screen.availWidth;sH=screen.availHeight;');
			writeln('if(iW>=sW || iH>=sH){window.resizeTo(sW,sH);window.moveTo(0,0)}else{');
			writeln(rs);
			writeln('var v=\"'+v+'\";var h=\"'+h+'\";');
			writeln('switch (v){case \"top\":vPos=0;break;case \"middle\":vPos=(sH-iH-'+adj+')/2;break;case \"bottom\":vPos=sH-'+adj+'-iH'+((is_safari)?'-20':'')+';break;default: vPos=0;}');
			
			writeln('switch (h){case \"left\":hPos=0;break;case \"center\":hPos=(sW-iW)/2;break;case \"right\":hPos=sW-iW'+((is_safari)?'-20':'')+';break;default: hPos=0;}');
			writeln('iWidth = document.images[0].width - iWidth;iHeight = document.images[0].height - iHeight;');
			writeln('window.resizeBy(iWidth+sc, iHeight+sc);');
			writeln('window.moveBy(hPos,vPos)}}');
			writeln('function doTitle(){document.title="'+unescape(imageTitle)+'";}'+'</sc'+'ript>');
			var cT=(!AutoClose)?"":"onBlur=\"sdstr=setTimeout('window.close(this)',1000)\"";
			//Prevent closing in IE
			var fL=(!AutoClose)?"":"onfocus=\"clearTimeout(sdstr)\"";
			var safari_fix=(is_safari)?" onload='resizeWin()'":"";
			var opera9_fix= (window.opera && window.getSelection)?" onload='doTitle();'":"";
			if(!CopyRight){var cr1="";var cr2=""}else{var cr1=" galleryimg=\"no\" title=\"Copyright Protected\" onmousedown=\"window.close()\" ";var cr2="oncontextmenu=\"return false\" "}
			writeln('</head><body  leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" bgcolor=\"FFFFFF\"  onload="'+ ((!is_safari)?'resizeWin();doTitle();':'')+'self.focus()" '+cT+' '+fL+' '+cr2+'>');
			writeln('<div '+fL+' align=\"center\" style=\"width:100%;height:100%;overflow:auto\"><img src="'+imageURL+'" '+cr1+safari_fix+opera9_fix+' ></div></body></html>');
			close();
		}
	}
}
</script>
</head>


<body>
<p>
  <style type="text/css">
body {
	font-size: 12px;
	font-family: Arial;
	line-height: 0px;
	margin-left: 50px;
	margin-right: 50px;
	
	}
	
</style>
  
  <style type="text/css">
.specpic {
  max-height: 400px;
  height: expression(this.height > 400 ? "400px" : true);
}
</style>
  
  <style type="text/css">
.logopic {
  max-height: 140px;
  height: expression(this.height > 140 ? "140px" : true);
}
</style>
  
  <%
If PrintCount > 0 Then 
response.write("<p>&nbsp;</p>")
End If
%>

<%
If (StyleInfo.Fields.Item("Division").Value = "Fair Weather") Then
%>
<center><img class="logopic" src="http://Vendor.AmieeLynn.com/Images/<%=(LicenseLogo.Fields.Item("LogoName").Value)%>" /></center>
<br /><br /><br />
<p>	Amiee Lynn Style #: <strong><%=(StyleInfo.Fields.Item("AL_Style").Value)%></strong></p>
<p>License: <strong><%=(StyleInfo.Fields.Item("License").Value)%></strong></p>
<p>Description: <strong><%=(StyleInfo.Fields.Item("Description").Value)%></strong></p>
<p>Color: <strong><%=(StyleInfo.Fields.Item("Color").Value)%></strong></p>
<p>Fiber / Material Content: <strong><%=(StyleInfo.Fields.Item("Fiber_Material").Value)%></strong></p>
<p>Vendor / Factory: <strong><%=(StyleInfo.Fields.Item("Vendor_Factory").Value)%></strong></p>
<p>Vendor Reference #: <strong><%=(StyleInfo.Fields.Item("Vendor_Reference").Value)%></strong></p>
<p>Minimum Order Quantity: <strong><%=(StyleInfo.Fields.Item("Minimum").Value)%></strong></p>
<p>First Cost: <b>$ </b> <strong><%=(StyleInfo.Fields.Item("First_Cost").Value)%></strong> + <strong> <%=(StyleInfo.Fields.Item("Duty").Value)%></strong><b> % </b>Duty</p>
<p>HTS Code: <strong><%=(StyleInfo.Fields.Item("HTS_Code").Value)%></strong></p>
<p>Weight: <strong><%=(StyleInfo.Fields.Item("Weight").Value)%></strong> g</p>
<p>Weight: <strong><%=(StyleInfo.Fields.Item("WeightLbs").Value)%></strong> lbs</p>
<p>Size: <strong><%=(StyleInfo.Fields.Item("Size").Value)%></strong></p>
<p>Shipping Cost: <strong><%=(StyleInfo.Fields.Item("ShippingCost").Value)%></strong></p>
<p>Misc Cost: <strong><%=(StyleInfo.Fields.Item("MiscCost").Value)%></strong></p>
<p>Landed Cost: <strong><%=(StyleInfo.Fields.Item("LandedCost").Value)%></strong></p>
<p>Notes: <strong><%=(StyleInfo.Fields.Item("Notes").Value)%></strong></p>
<p>Is this item compliant with CPSIA regulations for flammability or Prop 65 regulations regarding Lead and Cadmium in Accessories? <strong><%=(StyleInfo.Fields.Item("CPSIA").Value)%></strong></p>
<p>Is this item produced in a factory that has been audited for social compliance? <strong><%=(StyleInfo.Fields.Item("Social_Compliance").Value)%></strong></p>
Does this item contain components that fall under F&amp;W jurisdiction?<strong> <%=(StyleInfo.Fields.Item("F_W").Value)%></strong>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<center>

<img class="specpic" src="http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>" alt="" onclick="popImage('http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>','Amiee%20Lynn%20Style','top_left',false,false)" /></a>

</center>

<%
elseIf (StyleInfo.Fields.Item("Division").Value = "29 Palms") Then
%>
<center><img class="logopic" src="http://Vendor.AmieeLynn.com/Images/<%=(LicenseLogo.Fields.Item("LogoName").Value)%>" /></center>
<br /><br /><br />
<p>	Amiee Lynn Style #: <strong><%=(StyleInfo.Fields.Item("AL_Style").Value)%></strong></p>
<p>License: <strong><%=(StyleInfo.Fields.Item("License").Value)%></strong></p>
<p>Description: <strong><%=(StyleInfo.Fields.Item("Description").Value)%></strong></p>
<p>Color: <strong><%=(StyleInfo.Fields.Item("Color").Value)%></strong></p>
<p>Fiber / Material Content: <strong><%=(StyleInfo.Fields.Item("Fiber_Material").Value)%></strong></p>
<p>Vendor / Factory: <strong><%=(StyleInfo.Fields.Item("Vendor_Factory").Value)%></strong></p>
<p>Vendor Reference #: <strong><%=(StyleInfo.Fields.Item("Vendor_Reference").Value)%></strong></p>
<p>Minimum Order Quantity: <strong><%=(StyleInfo.Fields.Item("Minimum").Value)%></strong></p>
<p>First Cost: <b>$ </b> <strong><%=(StyleInfo.Fields.Item("First_Cost").Value)%></strong> + <strong> <%=(StyleInfo.Fields.Item("Duty").Value)%></strong><b> % </b>Duty</p>
<p>HTS Code: <strong><%=(StyleInfo.Fields.Item("HTS_Code").Value)%></strong></p>
<p>Weight: <strong><%=(StyleInfo.Fields.Item("Weight").Value)%></strong> g</p>
<p>Weight: <strong><%=(StyleInfo.Fields.Item("WeightLbs").Value)%></strong> lbs</p>
<p>Size: <strong><%=(StyleInfo.Fields.Item("Size").Value)%></strong></p>
<p>Is this item compliant with CPSIA regulations for flammability or Prop 65 regulations regarding Lead and Cadmium in Accessories? <strong><%=(StyleInfo.Fields.Item("CPSIA").Value)%></strong></p>
<p>Is this item produced in a factory that has been audited for social compliance? <strong><%=(StyleInfo.Fields.Item("Social_Compliance").Value)%></strong></p>
Does this item contain components that fall under F&amp;W jurisdiction?<strong> <%=(StyleInfo.Fields.Item("F_W").Value)%></strong>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<center>

<img class="specpic" src="http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>" alt="" onclick="popImage('http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>','Amiee%20Lynn%20Style','top_left',false,false)" /></a>

</center>


<%
else
%>

<center><img class="logopic" src="http://Vendor.AmieeLynn.com/Images/<%=(LicenseLogo.Fields.Item("LogoName").Value)%>" /></center>
<br /><br /><br />
<p>	Amiee Lynn Style #: <strong><%=(StyleInfo.Fields.Item("AL_Style").Value)%></strong></p>
<p>License: <strong><%=(StyleInfo.Fields.Item("License").Value)%></strong></p>
<p>Description: <strong><%=(StyleInfo.Fields.Item("Description").Value)%></strong></p>
<p>Color: <strong><%=(StyleInfo.Fields.Item("Color").Value)%></strong></p>
<p>Fiber / Material Content: <strong><%=(StyleInfo.Fields.Item("Fiber_Material").Value)%></strong></p>
<p>Vendor / Factory: <strong><%=(StyleInfo.Fields.Item("Vendor_Factory").Value)%></strong></p>
<p>Vendor Reference #: <strong><%=(StyleInfo.Fields.Item("Vendor_Reference").Value)%></strong></p>
<p>Minimum Order Quantity: <strong><%=(StyleInfo.Fields.Item("Minimum").Value)%></strong></p>
<p>First Cost: <b>$ </b> <strong><%=(StyleInfo.Fields.Item("First_Cost").Value)%></strong> + <strong> <%=(StyleInfo.Fields.Item("Duty").Value)%></strong><b> % </b>Duty</p>
<p>HTS Code: <strong><%=(StyleInfo.Fields.Item("HTS_Code").Value)%></strong></p>
<p>Weight: <strong><%=(StyleInfo.Fields.Item("Weight").Value)%></strong> g</p>
<p>Notes: <strong><%=(StyleInfo.Fields.Item("Notes").Value)%></strong></p>
<p>Is this item compliant with CPSIA regulations for flammability or Prop 65 regulations regarding Lead and Cadmium in Accessories? <strong><%=(StyleInfo.Fields.Item("CPSIA").Value)%></strong></p>
<p>Is this item produced in a factory that has been audited for social compliance? <strong><%=(StyleInfo.Fields.Item("Social_Compliance").Value)%></strong></p>
Does this item contain components that fall under F&amp;W jurisdiction?<strong> <%=(StyleInfo.Fields.Item("F_W").Value)%></strong>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<center>

<img class="specpic" src="http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>" alt="" onclick="popImage('http://Vendor.AmieeLynn.com/Images/<%=(StyleInfo.Fields.Item("File_Name").Value)%>','Amiee%20Lynn%20Style','top_left',false,false)" /></a>

</center>

<%
end if
%>

<br /><br />
</body>
</html>
<p style="page-break-before: always">
<%
StyleInfo.Close()
Set StyleInfo = Nothing
%>
<%
LicenseLogo.Close()
Set LicenseLogo = Nothing
%>
<%
PrintCount = PrintCount + 1
Next

%>

Open in new window

0
Comment
Question by:Jon DeVito
  • 3
  • 2
5 Comments
 
LVL 6

Accepted Solution

by:
CyberGhost earned 500 total points
Comment Utility
instead of using inline CSS (style tags), I would create an external CSS file and use a print stylesheet in order to adjust your page for printing purposes... more info can be found here: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

that way, you can separate what will user see on screen and what will be printed - and debug the overlapping as well
0
 
LVL 3

Author Comment

by:Jon DeVito
Comment Utility
I'm having all kinds of problems with the print stylesheet but I now see where my problem lies. I am using "line-height: 0px;" on line 145 to stop the double-spacing as I need everything to fit on one page. If I remove that line (or make it a larger #) everything works but not fitting to the page which is necessary...
Any ideas how to keep the single spacing another way?

Thanks.
Jon
0
 
LVL 3

Assisted Solution

by:Jon DeVito
Jon DeVito earned 0 total points
Comment Utility
I was able to figure it out. I had to remove all of the <p> & </p> tags I had in there, add a <br /> to move to the next line, then remove the "line-height: 0px" setting. That totally fixed the problem. Since I know doing a print stylesheet is a better way plus trying it that way made me play with my css settings which led me to the root problem, you get the points. Thanks again for the help!

Jon
0
 
LVL 6

Expert Comment

by:CyberGhost
Comment Utility
glad I could assist :)
0
 
LVL 3

Author Closing Comment

by:Jon DeVito
Comment Utility
Thanks again.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now