I am writing a selenium java code and at a particular webpage i want to select a link from a group of links where each link has an emebeded text within a table. How can i select particular link at this situtation. for eg.
run title--text 1
run title--text 2
run title--text 3
how can select specific run link for a specific title text? the text is not a label rather it is just simple text on the webpage.
i am using the following code:
verify.text("text 1");
it will only verify the presence of text, it wont go towards the link as link of every execution is named RUN. so it will identify the corresponding run link? The HTML code for the above is:
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
<div align="center"><table class="module" width="630">
<tr>
<th class="banner" width="70">ACTION</th>
<th class="banner" width="560">REPORT TEMPLATE</th>
</tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com/">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.zxc.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Performance by Priority</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing"> Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Performance by Priority</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.cxd.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Trend Analysis Report</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing">Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Trend Analysis</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.sdfds.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.asdg.com">UnShare</a></td></tr>
</table>
</DIV>
</td>
</BODY>
</HTML>
Get a list of web elements and iterate over them.
This is not tested
E.g.
List<WebElement> we = findElements(By.cssSelector("tr a"));
Iterator itor = we.iterator()
While(itor.hasNext()) {
WebElement we = itor.next();
if (we.getText().equals("your visible text")) {
we.click // click link
}
}
Related
With the following dot
digraph structs {
node [shape=plaintext]
struct1 [label=<
<table border="1">
<tr>
<td align="left">
<TABLE border="1">
<TR>
<TD align="left">one</TD>
<TD align="left">long text here</TD>
<TD align="left">c</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align="left">
<TABLE border="1">
<TR>
<TD align="left">very long text present here</TD>
<TD align="left">colb</TD>
<TD align="left">colc</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
>];
}
Graphviz yields the image below (my notes with red):
Now, if I take the table HTML from above and render it in the browser, I get what I would also expect from Graphviz:
Question: how can i get Graphviz to render the table same as the browser does (no extra-space inside the columns, but instead have it after the last column) ?
If it's not possible, how do I input the node label so that I get the same result as the browser returns?
Thank you.
Possible workarounds:
digraph structs {
node [shape=plaintext]
struct1 [label=<
<table border="1">
<tr>
<td align="left">
<TABLE border="0" width="1" fixedsize="true" align="left" cellpadding="0" cellsborder="0" CELLSPACING="0">
<TR>
<TD align="left">
<TABLE border="1" >
<TR>
<TD align="left">one</TD>
<TD align="left">long text here</TD>
<TD align="left">c</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align="left">
<TABLE border="1">
<TR>
<TD align="left">very long text present here</TD>
<TD align="left">colb</TD>
<TD align="left">colc</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
>];
}
rendered on: http://viz-js.com/
I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding table-layout: fixed to both your <table> elements.
If U want to use a table header I suggest using <th> (see here)
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%">test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
Looks like you missed a closing tag for a <TD>(<td width="10%">test6</td>). Hope this helps. Let me know
I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO
I've added a table inside a table.
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
But I want "TEST" values under col1 and numeric values under col2. Currently all values are shown under col1.
Edit - Actual Code
<tr>
<td colspan="10">
<table class='<%= "table"+count%>' style="display:none" border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<nested:iterate property="equipC" id="equipmentFormBean" indexId="ffIndex" >
<tr class='<%= "table"+count%> dataOff' style="display:none">
<td align="right" ><nested:write property="equipInitial" /> </td>
<td ><nested:write property="equipNum" /> </td>
</tr>
</nested:iterate>
</table>
</td>
</tr>
How to do it?
Use Google chrome...Your html code is right.On my PC I see the values are in COL2.
Use Forgot to use table heading heading tag "th"
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<th>col1 </th>
<th>col2</th>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
Your HTML code is correct. With the html provided by you it displayed the tables properly. You may please see it here # FIDDLE - http://jsfiddle.net/BRxKX/4986/
Problem could be with dynamic generation of tables and mostly around COLSPAN if at all its being used in your dynamic code.
Here is code that I tested (you can see this in - http://jsfiddle.net/BRxKX/4986/)
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am running the following as a simple html file.Problem is that when i am running it on firefox i get a different view than on chrome i.e extra space at the end of the page in the table in case of chrome because of which i am getting extra pages at the end in print preview,i want that it should look as in case of firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:55 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Printing Work Order</TITLE>
</HEAD>
<BODY>
<img src="/CFFileServlet/_cf_image/_cfimg5646601472618022292.PNG" alt="" />
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%"><b><font size="+1"> </font></b></TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><b>WORKORDER - Pest Control Services</b>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td><img src="http://209.123.166.68/E7CC71EB-756D-462F-9641B46BA6927E9B/pestlogo.jpg" alt="" width="100" height="125" border="0"></td>
<td>
<FONT SIZE="5">
Preferred Pest Services, Inc D/B/A Pest Pro Services
</FONT>
<BR>
32 Drysdale Street<BR>
Staten Island, NY, 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333 Email:pestprosolutions#gmail.com
<BR>
Sales Representative: Debbie
</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="95%">
<TR>
<TD><b>Order#:</b></TD>
<TD> 92681</TD>
</TR>
<TR>
<TD><b>JobDate:</b></TD>
<TD> <b>10/07/2011</b></TD>
</TR>
<TR>
<TD><b>Day of Week:</b></TD>
<TD> <b>Friday</b></TD>
</TR>
<TR>
<TD><b>Location:</b></TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD><b>Start Time:</b></TD>
<TD> 12:00 PM</TD>
</TR>
<TR>
<TD width="50%"><b>CFP:</b></TD>
<TD width="50%"> </TD>
</tr>
<tr>
<TD width="50%"><b>CN:</b></TD>
<TD width="50%"> </TD>
</TR>
<tr>
<TD width="50%"><b>Day Number:</b></TD>
<TD width="50%"> 1/1 </TD>
</TR>
</table>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>FOR OFFICE USE ONLY:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><B>CUSTOMER INFORMATION:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Email: <BR>
<TD WIDTH="50%" VALIGN="TOP"><B>Billing Address:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>JOB SITE:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
<b>JOB INFORMATION:</b><BR>
2651 Eighth Avenue<br>
New York, NY 10030<br>
Primary Contact: Eriberto Jacques 172*44*29419 Phone: 718 884-7676 Cell: Beeper:<br>
Notes:<BR>
JOB TYPE: Pest Control Services<BR>
<BR>
<BR>
</TD>
</TR>
<TR>
<TD COLSPAN="2"><B>Job Description:</B>
Pest Control Services-First Friday of the month 12:00 PM
</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Special Instructions:</B><BR>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS</TD>
</TR>
<TR>
<TD COLSPAN="2"><b>ORDER TOTALS</b></TD>
</TR>
<TR>
<TD COLSPAN="2">Service Price: $30.00 Parts: $0.00 Subtotal: $30.00 Tax: $2.51 Total: $32.51</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Parts:</B><BR>
<table width="90%" border="1" cellspacing="0" cellpadding="0"><tr>
<TR>
<TD WIDTH="49%"><b>ItemID</b></TD>
<TD WIDTH="24%"><b>Description</b></TD>
<TD WIDTH="20%"><b>Qty</b></TD>
<TD WIDTH="20%"><b>Price</b></TD>
<TD WIDTH="20%"><b>Total</b></TD>
</TR>
</TD>
</tr>
</table>
</TR>
<TR>
<TD COLSPAN="2"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<DIV>
<P><FONT SIZE="2">Please sign that job was completed and performed in a <BR>
satisfactory manner.</FONT></P>
<P><FONT SIZE="2">Name:___________________________<BR><br>
Authorized Signature:_____________________________<BR><br>
Title:__________ Date:__________<BR><br>
</FONT>
</DIV>
<P><FONT SIZE="2">Job Completed: [ ]Yes [ ]No </FONT><FONT SIZE="1"></FONT>
</TD>
<TD WIDTH="50%" VALIGN="TOP"><FONT SIZE="2">Persons on the Job<BR><BR>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="74%">
<TR>
<TD WIDTH="49%"><FONT SIZE="2"><b>Name</b></FONT></TD>
<TD WIDTH="24%"><FONT SIZE="2"><b>Start Time</b></FONT></TD>
<TD WIDTH="20%"><FONT SIZE="2"><b>End Time</b></FONT></TD>
</TR>
<TR>
<TD WIDTH="49%">Carlos Almonte</TD>
<TD WIDTH="24%"> </TD>
<TD WIDTH="20%"> </TD>
</TR>
</TABLE>
<font size="-1"><br>Please use the back of this workorder for comments.</font></FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
<table Align="Center" width="85%">
<tr>
<td valign="Top">
<font size="+4"><div align="center"><b><u>WARNING!!</u></b></div></font>
<div align="center"><font size="+3">To all residents of:</font></div><br>
<font size="+3"><div align="center">2651 Eighth Avenue</div></font>
<br>
<div align="center"><font size="+4">Your stairhalls will be cleaned on:</font></div></font>
<br><br>
<font size="+3"><div align="center">Friday Oct-07/2011 12:00PM-06:11PM</div></font>
<br><br>
<font size="+4">
<b>DANGER TO ANYONE ATTEMPTING TO ENTER STAIRWAY !!!!</b>
<BR><BR>
<b>MUST USE CAUTION WHEN USING THESE STAIRCASES FOR THE NEXT 48 HOURS!</b>
</font>
<br><br>
<font size="+3"><p align="right">Thank You for your cooperation,<br>
The Management</p></font>
</td>
</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:49 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Confirmation</TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">
</TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><font size="+1"><b>CONFIRMATION OF SERVICES<BR> for Pest Control Services</b></font>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td align="left" valign="Top">
</td>
<td valign="top">
<FONT SIZE="5">Pest Pro Services</FONT><BR>
32 Drysdale Street<BR>
Staten Island NY 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333
<BR>
</td>
</tr>
<tr>
<td colspan="2">Sales Representative: Debbie</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="75%">
<TR>
<TD>Order#:</TD>
<TD> 92681</TD>
</TR>
<TR>
<TD>JobDate:</TD>
<TD> 10/07/2011</TD>
</TR>
<TR>
<TD>Location:</TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD>StartTime:</TD>
<TD> 12:00 PM</TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">Lemle and Wolff<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Billing Address: 5925 Broadway<br>
Address: Bronx, NY 10463<BR>
</TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
JOB TYPE: Pest Control Services<BR>
Attention: Eriberto Jacques 172*44*29419<BR>
Job Address: 2651 Eighth Avenue<BR>
Job City: New York
Borough or Town: Manhattan<BR>
<BR>
Site Manager/Super: Eriberto Jacques 172*44*29419 Tel: 718 884-7676
Beeper: Cell: Location
of Site/Mtc: Eriberto Jacques 172*44*29419<BR>
<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><BR>
Dear Customer,<br><br>
Thankyou for choosing us as your building maintenance company. Your building/s will be serviced on:<br>
<br>
<font size="+1"><b>Day:</b> Friday<br>
<b>Date:</b> Oct-072011<br>
<b>Start Time:</b> 12:00 PM<br></font>
<br>
Please post
any notices if applicable.
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<B><FONT SIZE="2">SPECIAL INSTRUCTIONS:</FONT></B>
<br>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS
<br>
<br>
<br>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="80%">
<TR>
<TD WIDTH="67%"><FONT SIZE="2">Agreed Price:</FONT></TD>
<TD WIDTH="33%" Align="Right"><FONT SIZE="2">$30.00</FONT></TD>
</TR>
<TR>
<TD WIDTH="67%"><FONT SIZE="2">P.O. #:</FONT></TD>
<TD WIDTH="33%"></TD>
</TR>
</TABLE>
<br><br>
<b> All cancellations require at least 24 hours of notice to us
Failure to do so could result in extra charges.</b>
</TD>
</TR>
<TR>
<TD COLSPAN="2">
</TD>
</TR>
<TR>
<TD VALIGN="TOP">
Date Confirmed: <br>
Confirmed By:
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
First, make a stylesheet for your print layout:
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
Key there being media="print".
Next, reset the base style so it's cross-browser normalized. Check out YUI3's CSS reset syntax for a quick reference: http://yuilibrary.com/yui/docs/cssreset/
From there, you'll want to omit visual stuff people hate printing out, like logos, graphical navs, etc:
#logo, .nav-tab, .etc {
display:none;
}
Finally, set the page breaks so you don't get unintentional content-splitting across multiple pages:
#some-important-element {
page-break-before: always;
}
Once you set this up, you won't have to worry about cross-browser quirks interfering with your web-print renderings.