Printing html which refers css

How to print a html page which links to a css (with all the prop menti

Page 1 of 1

5 Replies - 1199 Views - Last Post: 13 May 2009 - 02:32 PM

#1 Kothai  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-May 09

Printing html which refers css

Posted 13 May 2009 - 01:32 PM

I have a html page designed with reference to a css file
the output is attached, i want the same output to be printed, but if we use print option, the size of the content gets diminished and not able to view the css props when the page gets printed. Sad

PLz help me with print option.

 <HTML>
<TITLE>Review Spec</TITLE>
 <LINK REL="StyleSheet" HREF="review_spec.css" TYPE="text/css" media="screen" />



		<!-- Input Area-->
<div id="inputArea" class="input" position="static">
		
<table align="right" class="one">
			
<input type="button" class="button_basic" value="Back">

</table>
</div>
		
		<!-- Output Area-->
		
<div id="outputArea" class="output">

<table class="two">

<tr>
<td colspan="3" align="center">SPEC NO: QS90291
			                
			  REV:  00
</td>
</tr>


<tr>
<td class="one" colspan="3" align="center">CUSTOMER DRAWING
</td>
</tr>
		
<tr>
<td nowrap colspan="1">ORDERING PART NO: 8 611 200 721 456 <br><br><br>
</td>
<td nowrap colspan="2">
		REV: <br><br>    OTHER REFERENCES: SPANSION DATA SHEET S29GL128N
</td>
</tr>

<tr>
	<td class="one" colspan="3" align="center">DEVICE
</td>
</tr>


<tr  height ="45%">
<td width="30%">
EXT DEVICE: 9GL128N<br>
OPER RANGE: I2<br>
SIMILAR TO: S29HT47MOMOL9
<br>
</td>
<td width="30%" >
	PACKAGE CODE: TS<br>
	BURN-IN CODE:<br>
	  DEVICE VER: 98VFJFG
</td>
<td width="30%">    LEADS: 056<br>
		PERF.CODE: LH<br>
		USA BUILD: { }
</td>
</tr>
</table>
</div>
</HTML>


<style type="text/css">
 table.one
{
margin-top: 10px;
margin-right:10px;
}

table.two
{
	background-color: #000000;	
	margin-top: 30px;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 50px;
	border-collapse: collapse;
	border-top-style:dashed;
	border-left-style:solid;
	border-right-style:solid;
	border-bottom-style:dashed;
	border-width:1px;
	border-color: white;
	
} 

td
{ 
	font-size:5px;
	color:#FFFFFF;
	font-family:courier; font-weight: bold;
	padding: 1em;
			}

td.one{
	border-style:dashed;
	border-width:1px;
	}

.input
{
	
	color: #000000;
	width: 900px;
	align:center;
}


.output
{
	color: #000000;
	width: 900px;
	height: auto;
}

.button_basic{
color:#555577;
font-weight:bold;
height:30px;
line-height:15px;
margin-bottom:1px;
text-decoration:none;
width:65px

}

.button_color{
 background-color: #FFFFFF;
 color: #000000;
}

</style>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Printing html which refers css

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Printing html which refers css

Posted 13 May 2009 - 01:56 PM

So from what I understand you have tried using the media="print" function on the css link?

I have never had issues with that. Can you give me some more info?

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 Kothai  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-May 09

Re: Printing html which refers css

Posted 13 May 2009 - 02:08 PM

View Postgregwhitworth, on 13 May, 2009 - 12:56 PM, said:

So from what I understand you have tried using the media="print" function on the css link?

I have never had issues with that. Can you give me some more info?

--

Greg


whatever attributes i have mentioned in css, gets reflected in the output, but not in the print preview.
plz help to get the same output in print preview too
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Printing html which refers css

Posted 13 May 2009 - 02:15 PM

All I ever use is the following:

<link type="text/css" href="yourlink.css" rel="stylesheet" media="print" />

This post has been edited by gregwhitworth: 13 May 2009 - 02:15 PM

Was This Post Helpful? 0
  • +
  • -

#5 Kothai  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-May 09

Re: Printing html which refers css

Posted 13 May 2009 - 02:19 PM

View Postgregwhitworth, on 13 May, 2009 - 01:15 PM, said:

All I ever use is the following:

<link type="text/css" href="yourlink.css" rel="stylesheet" media="print" />


But it is not working for me greg! :(
my output has tables in it, in the print preview, it is not showing those tables, neither the fonts which i have mentioned
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Printing html which refers css

Posted 13 May 2009 - 02:32 PM

I see that you are using IE. Use FF or some other browser to test it out on - because I just printed your code out with the link type I showed you and it worked fine. Also, your text on FF is TINY!

Also, in XHTML you are supposed to declare a doctype and all tags need to be lower case (ie <td> not <TD>)

--
Greg
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1