I am programming a HTML Email to be sent out and can not figure out why its going crazy like this.
I have sent out emails in the past using the same pieces of code ( the footer sections) and it worked fine then and wont work this time around. The code seems to render just fine in chrome via the Dreamworks "real-time Preview" but does not render correctly when opened in Internet Explorer or Edge, or more importantly the outlook mail system. I am new to HTML still and have racked my brain over this to no avail. I spent hours adding in "align="center"" and trying many other things to fix not only the insane footer placement but also the fact it wont center!
Image of what i want it to look like when done
Thanks for the help!
<html>
<head>
<title>8,22,17 eNewsleter 477 and mikrotik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 700" align="center">
<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="2">
<a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png" height="78">
</a>
</td>
<td valign="top" align="right" height="36">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png" width="130">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png" height="48">
</td>
</tr>
<tr align="right">
<td colspan="3" align="right" valign="top">
<a href="tel:314-7350270" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png" width="120"></a><img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png" width="170">
</td>
</tr>
</table>
<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png
-->
<!-- Save for Web Slices (8,22,17 eNewsleter 477 and mikrotik.psd) -->
<table id="Table_01" width="700" height="923" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_01.png" width="700" height="420" alt="Caution: 477 Section 5.3 data your billing system provides is wrong! Don’t understate your actual coverage area by 90+% using data provided by your billing system. You must have accurate RF propagation maps to get this data correct!">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_02.png" width="700" height="305" alt="Mikrotik Sale at Link Technologies Inc." style="display: block;">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_03.png" width="700" height="198" alt="Link Technology Offers Support" style="display: block;">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- BEGIN OF FOOOTER -->
<table id="Footer" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<!--insert additional parts below this line-->
<!-- Start of PowerLink Ad -->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td colspan="4">
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/5th-Power-Link-Footer.png" alt="PowerLink is a battery powered PoE injector with built-in Wi-Fi access point. No more running test cable! 8 watt or 15 watt options available." width="700" height="168" usemap="#Map2" border="0" style="display: block">
</a>
<map name="Map2" style="z-index: 50">
<area shape="rect" coords="344,113,446,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2233&idcategory=0" target="_blank" alt="8 Watt">
<area shape="rect" coords="495,114,594,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="15 watt">
</map>
</td>
</tr>
<!-- End of PowerLink Ad -->
<!--insert additional parts above this line-->
<tr style=";display: block;">
<td>
<a href="https://www.towercoverage.com//" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png" width="175" height="88" alt="TowerCoverage.com">
</a>
</td>
<td>
<a href="http://www.ispradio.com/" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png" width="175" height="88" alt="ISP Radio Network" style="display: block">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewContent.asp?idpage=33" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png" width="175" height="88" alt="Hotspot Network Manager" style="display: block" align="center">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2046&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png" width="175" height="88" alt="Power Router v4" style="display: block" align="center">
</a>
</td>
</tr>
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td>
<a href="##HTMLNewsletterURL##" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png" width="233" height="25" alt="View as HTML">
</a>
</td>
<td style="padding: 0">
<a href="http://news.linktechs.net/members.aspx?Task=FF&S=1&N=54&Format=HTML&E=support%40linktechs.net">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_006.png" width="234" height="25" alt="Forward to a Freind">
</a>
</td>
<td>
<a href="##OptOutURL##">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png" width="233" height="25" alt="Opt Out">
</a>
</td>
</tr>
</table>
<!--LINKS FOR THE IMAGES IN ORDER!
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_06.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png
-->
<!-- END OF FOOTER -->
</body>
</html>
I was able to answer my own question for anyone who happens across this. I do not understand why, but adding a second table to the bottom most part of the page fixed the issue.
here is the code fixed this way.
Even though i answered myself, and this is a solution to the problem. I do not understand as to why this is the solution. I just threw things at it until i figured something out that worked. If you know why feel free to answer again and get credit for the true answer.
<html>
<head>
<title>8,22,17 eNewsleter 477 and mikrotik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="2">
<a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png" height="78">
</a>
</td>
<td valign="top" align="right" height="36">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png" width="130">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png" height="48">
</td>
</tr>
<tr align="right">
<td colspan="3" align="right" valign="top">
<a href="tel:314-7350270" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png" width="120"></a>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png" width="170">
</td>
</tr>
</table>
<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png
-->
<!-- Save for Web Slices (8,22,17 eNewsleter 477 and mikrotik.psd) -->
<table id="Table_01" height="923" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="699">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_01.png" width="700" height="420" alt="Caution: 477 Section 5.3 data your billing system provides is wrong! Don’t understate your actual coverage area by 90+% using data provided by your billing system. You must have accurate RF propagation maps to get this data correct!">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_02.png" width="700" height="305" alt="Mikrotik Sale at Link Technologies Inc." style="display: block;">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_03.png" width="700" height="198" alt="Link Technology Offers Support" style="display: block;">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- BEGIN OF FOOOTER -->
<table id="Footer" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<!--Add extras below this line-->
<!-- Start of PowerLink Ad -->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td colspan="4">
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/5th-Power-Link-Footer.png" alt="PowerLink is a battery powered PoE injector with built-in Wi-Fi access point. No more running test cable! 8 watt or 15 watt options available."
width="700" height="168" usemap="#Map2" border="0" style="display: block">
</a>
<map name="Map2" style="z-index: 50">
<area shape="rect" coords="344,113,446,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="8 Watt">
<area shape="rect" coords="495,114,594,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="15 watt">
</map>
</td>
</tr>
<!-- End of PowerLink Ad -->
<!--Add extras above this line-->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td>
<a href="https://www.towercoverage.com//" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-1-TowerCoverage.png" width="175" height="88" alt="TowerCoverage.com" style="display: block">
</a>
</td>
<td>
<a href="http://www.ispradio.com/" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-2-ISP-Radio.png" width="175" height="88" alt="ISP Radio Network" style="display: block">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewContent.asp?idpage=33" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-3-HSNM.png" width="175" height="88" alt="Hotspot Network Manager" style="display: block" align="center">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2046&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-4-PR4.png" width="175" height="88" alt="Power Router v4" style="display: block" align="center">
</a>
</td>
</tr>
</table>
<table id="Footer2" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="##HTMLNewsletterURL##" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png" width="233" height="25" alt="View as HTML">
</a>
</td>
<td style="padding: 0">
<a href="http://news.linktechs.net/members.aspx?Task=FF&S=1&N=54&Format=HTML&E=support%40linktechs.net">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_006.png" width="234" height="25" alt="Forward to a Freind">
</a>
</td>
<td>
<a href="##OptOutURL##">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png" width="233" height="25" alt="Opt Out">
</a>
</td>
</tr>
</table>
<!--LINKS FOR THE IMAGES IN ORDER!
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_06.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png
-->
<!-- END OF FOOTER -->
</body>
</html>
I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
I have tried to put overflow property in CSS
You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:
<div style="height: 200px; overflow: auto;">
<table>
...
</table>
</div>
And you have to remove position: absolute from the style of the table.
Here's an example: http://jsfiddle.net/qbkfbrwd/
Hope that helps!
Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:
tbody {
display: block;
height: 200px; //or whatever you want the height to be
overflow: auto;
}
Example: http://jsfiddle.net/f91pzj6d/
Create a div with:
<div id="myTable">
and in css:
myTable {
overflow:auto;
}
I add a div as container and use overflow: auto. You have also to set a height for your table:
#tableContainer {
overflow: auto;
height: 200px;
position: relative;
width: 300px;
}
<div id="tableContainer">
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where
<br/>duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches
<br/>for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
</div>
I have an email template I created but I can't seem to figure out what is stretching out the table, I've attached a screenshot for reference. Any help would be wonderful.
Here's the code for that part of the template:
<tr>
<td style="width:27px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
<td style="width:31px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:24px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:25px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:518px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
<tr>
<td style="display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
Instead of float, use the html align="left" in your table cells. You don't need display:block; in the table cells, instead put it in your image tags.
Also, remove all the css width and height in your table cells and replace it with the html width="" and height=""
Also, if you put this in your table tag: border="0" cellpadding="0" cellspacing="0", you don't need the padding and margin in your table cell css.
Basic example of all combined:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="31" height="53" align="left">
<img alt="" src="" width="31" height="53" border="0" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Note - align left is default, so it is not really needed.
I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;
I'm trying to create a dynamic xpath or css locator to locate, edit and delete images that are first column of matrix table that contains account information. Each account is distinct by email id, such as johng#teat.com in following html code.
What I'm looking for is how to write xpath/css locator that allows us to click on edit and delete icon/link based on known account email id.
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>johng#test.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>Chris</td><td>Phela</td><td>kphela#test1.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test1.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>Pattyg#test2.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test2.com</td><td>never</td>
I slightly modified the xml to make it well-formed. Here is the sample on which my answer is based on.
<root>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(528);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>johng#test.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',302); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(302);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>Chris</td>
<td>Phela</td>
<td>kphela#test1.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test1.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(890);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>Pattyg#test2.com</td>
<td></td>
Now to select delete link based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a[#title='remove']
To select edit icon based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a/img[contains(#alt,'edit')]
Hope this helps.