I want to click the image <img> w.r.t to the "TM100" mentioned in the td tag. Please can anyone give me the XPath.
I'm facing issue in the selecting the image. Because all the image are having the same xpath.
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">6073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM2</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">1073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM3</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">8073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM100</td>
</tr>
Please check this one, might be this could works for you:
//tr[descendant::td[contains(text(),'TM100')]]//img[#class='newassetIcon assetIcon linkable']
I have tested the above code using this:
//tr[descendant::td[contains(text(),'TM100')]]//td[contains(text(),'XX0172')]
If you want to get the img element you can use the following XPath
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a/img
If you want to click the image you might want to select the a, so the following works:
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a
Related
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I'm trying to put a shadow on each one of my table lines. But it's not working with the first one and I don't really understand why.
I put you the css inline as you can see the all things
{% for resultat in resultats %}
<tr style="background-color: #F0F0F0; box-shadow: 8px 8px 12px #aaa, 8px -8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;"
id="first_{{ nb }}>
<td>
<span class="fl marginTop8">
{{ resultat.missions.getDateReaPrev()|date('Y-m-d') }}
</span>
</td>
<td></td>
<td></td>
<td>
<span class="fl marginTop8">
{{ resultat.distance }} Km
</span>
</td>
<td></td>
<td class="badge fr" style="color: darkorange;">{{ resultat.nb_pdv }}</td>
</tr>
<tr style="background-color:white">
<td colspan="6"></td>
</tr>
{% endfor %}
Here is what I got with this code:
As you can see, the shadow is on the right both tr...but the border is only on the last tr.
I would like to get something like this one
Thanks for your help.
EDIT: For more precision there is a class tableEnquete on the table.
So there is too
.tableEnquetes tr:nth-child(2){ position:relative }
.tableEnquetes table{
border-radius: 0 0 15px 0;
box-shadow: 3px 3px 3px #AAA;
margin: 0;
table-layout: fixed;
}
Here is a fiddle of this problem: https://jsfiddle.net/wdwgn7ta/
You only need to change background-color:white to background-color:none
<tr style="background-color:none">
<td colspan="6"></td>
</tr>
My website has borders on many objects using border= activeborder 1px solid and it was working fine till last week on all the browsers. Now it has stopped working just on Chrome (Works on all other browsers). I haven't changed anything in the style sheet and have checked many times but it still does not work for some reason. Here's a sample of the code. If I change activeborder to gray 1px solid it works. Why so ? some kind of google update ?
<html>
<head></head>
<body>
<form id="form1">
<div>
<table style="width: 90px; margin-top: 27px;" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 30px;">
Latest News
</td>
</tr>
<tr>
<td style="border: activeborder 1px solid; padding: 10px" align="left">
<a style="color: #666666;" href="" target="_blank">one</a>
<br />
<a style="color: #666666;" href="" target="_blank">two</a>
<br />
<a style="color: #666666;" href="" target="_blank">three</a>
<br />
<a style="color: #666666;" href="" target="_blank">four</a>
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
activeborder is not a standard css colour name. Using a standard name e.g. gray, or #666 or rgb(50,50,50) should work.
They were included as CSS2 system colours, but are now deprecated (an apparently now don't work). My testing shows that:
background-color: ActiveBorder;
... does work in IE11 and FireFox26 but not in Chrome32. Try seeing if it works in Quirks mode.
Find and Replace is your friend if you want to use css3 standard colors ;)
And ... ahem ... you should be defining your css in a stylesheet, not inline rough idea:
table.grid {width: 90px; margin-top: 27px;}
.grid td {border: 1px solid #999; padding: 5px 10px; text-align: left;}
.grid a {color: #666}
but I'm sure you knew that and were only doing inline for the example ;)
I am making a HTML newsletter and keep running into this problem. The image at the top for some reason ignores the margin and gives an ugly white line.
While this site says that email clients should accept margin's: http://www.campaignmonitor.com/css/
Does anyone know how to fix this?
Edit: new and cleaner code, but still same problem! I have no idea how to get that damn thing down. =/ (also my left border is gone now, and I don't know why)
<table cellspacing="0" cellpadding="0" width="811px" style="border:0px solid black;border-collapse:collapse">
<tr>
<td width="150px" VALIGN=TOP style="border-bottom: 1px solid #000000;">Nieuwsbrief #<?php echo $nr; ?></td>
<td width="500px" style="vertical-align: bottom;"><img src="http://pietrow.net/newsletter/images/lad_wide.png" style="z-index:-1;"></img></td>
<td width="150px" align="right" style="vertical-align: top; border-bottom: 1px solid #000000;" >Datum: <?php echo $datum; ?></td>
</tr>
<tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px" width="811px">
<td width="270px"><center>Website</center></td>
<td width="271px"><center>Facebook</center></td>
<td width="270px"><center>Contact</center></td>
</tr>
<tr style="background: #DBDBDB; border:0px; border-left: 1px solid #000000; border-right: 1px solid #000000;" width="811px">
<td colspan="3" width="811px"><center>**ENGLISH VERSION BELOW**</center></td>
</tr>
<tr >
<td style="background: #DBDBDB; border: 1px solid #000000; border-bottom: 0px;" colspan="3" width="811px">
Remember with HTML emails you need to go very much 'old-school' as the email clients that render them are even more archaic than even old versions of IE.
Therefore, try to remember back to the days before DIVs and lovely CSS layouts, back to the days when tables were for layout...
Try adding:
cellpadding="0" cellspacing="0"
to your table declaration then consider putting your content in a table within the main table as opposed to two tables stacked on top of one another. Or, if you can, rationalise the three columns and create one single table.
You need display:block; on your image. Here is an example of how all images should look in html email:
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt="">
Some additional notes:
You don't need <center>, use <td align="center"> instead.
You shouldn't use px in the width="" declarations. Example: width="150"
Declare background color only in a table or table cell using bgcolor method. Example: bgcolor="#DBDBDB"
I have a CSS Based dropdown menu that works great in Firefox and Chrome, however, in IE it submenu's won't dropdown. I had it working for a SHORT while, but now again its not working. Please help!
URL: itsjust4me.com
CSS:
body,ul,li{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:left;}
#menu{
line-height:21px;
background:#ED7CD4;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
box-shadow:0 0 1px #EDF9FF inset;
height:50px;
list-style:none outside none;
margin:0;
padding:0 10px 0px 5px;
z-index:50000;
}
#menu li{border:medium none;display:block;float:left;margin-right:2px;margin-top:10px;margin-bottom:-3px;padding:4px 10px;position:relative;text-align:center;}
li.lessline{line-height:150%!important;margin-bottom:7px!important;}#menu li:hover{border-radius:5px 5px 0px 0px; background:#FCEFF9;border:1px solid #777777;padding:4px 9px;}#menu li a{color:#FFFFFF;display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;outline:0 none;text-decoration:none;text-shadow:1px 1px 1px #000000;}#menu li:hover a{color:#B10D90;text-shadow:1px 1px 1px #FFFFFF;}#menu li .drop{background:url("img/drop.png") no-repeat scroll right 8px transparent;padding-right:21px;font-weight:700;}#menu li .noarrow{background:none!important;padding-right:0;font-weight:700;}#menu li:hover .drop{background:url("img/drop.png") no-repeat scroll right 7px transparent;}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#FCEFF9;border-color:-moz-use-text-color #777777 #777777;border-image:none;border-radius:0 5px 5px 5px;border-right:1px solid #777777;border-style:none solid solid;border-width:medium 1px 1px;float:left;left:-999em;margin:4px auto;padding:10px 5px;position:absolute;text-align:left;box-shadow:0px 12px 10px #000;-moz-box-shadow:0px 12px 10px #000;-webkit-box-shadow:0px 10px 10px #000;}.dropdown_1column{width:140px;}.dropdown_2columns{width:280px;}.dropdown_3columns{width:420px;}.dropdown_4columns{width:560px;}.dropdown_5columns{width:700px;}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;margin-left:5px;margin-right:5px;position:relative;}.col_1{width:130px;}.col_2{width:270px;}.col_3{width:410px;}.col_4{width:550px;}.col_5{width:690px;}#menu .menu_right{float:right;margin-right:0;}#menu li .align_right{border-radius:5px 0 5px 5px;}#menu li:hover .align_right{left:auto;right:-1px;top:auto;}#menu p,#menu h2,#menu h3,#menu ul li{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:21px;text-align:left;text-shadow:1px 1px 1px #FFFFFF;}#menu h2{border-bottom:1px solid #B10D90;font-size:21px;font-weight:700;letter-spacing:-1px;margin:7px 0 14px;padding-bottom:14px;color:#B10D90;}#menu h3{border-bottom:1px solid #00ACED;font-size:14px;margin:7px 0 14px;padding-bottom:7px;color:#00ACED;}#menu p{line-height:18px;margin:0 0 10px;}#menu li:hover div a{color:#015B86;font-size:14px;}#menu li:hover div a:hover{color:#029FEB;}.strong{font-weight:bold;}.italic{font-style:italic;}.imgshadow{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #777777;box-shadow:0 0 5px #666666;margin-top:5px;padding:4px;}.img_left{float:left;margin:5px 15px 5px 5px;width:auto;}#menu li .black_box{background-color:#333333;border-radius:5px 5px 5px 5px;box-shadow:0 0 3px #000000 inset;color:#EEEEEE;padding:4px 6px;text-shadow:1px 1px 1px #000000;}#menu li ul{list-style:none outside none;margin:0 0 12px;padding:0;}#menu li ul li{float:none;font-size:12px;line-height:24px;margin:0;padding:0;position:relative;text-align:left;text-shadow:1px 1px 1px #FFFFFF;width:130px;}#menu li ul li:hover{background:none repeat scroll 0 0 transparent;border:medium none;margin:0;padding:0;}#menu li .greybox li{background:none repeat scroll 0 0 #FFE0F8;border:1px solid #EDC4E3;border-radius:5px 5px 5px 5px;margin:0 0 4px;padding:4px 6px;width:116px;}#menu li .greybox li:hover{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #AAAAAA;margin:0 0 4px;padding:4px 6px;}#menu .search{background:none!important;border:none!important;border-radius:0!important;padding:0!important; display:block;}#menu .search:hover{background:none!important;border:none!important;border-radius:0!important;padding:0!important;}
#menu th {background:#F7D7EF;border-right:solid 1px rgb(232, 208, 226); border-bottom:solid 1px rgb(232, 208, 226); color:#B10D90 !important;}
#menu td {border-bottom:dashed 1px rgb(232, 208, 226);}
.menutableright {border-right:dashed 1px rgb(232, 208, 226);}
.single {border-radius:5px 5px 5px 5px !important;}
HTML
in head
<link rel="stylesheet" type="text/css" href="../usermods/_INCstyles_.css" media="all">
<link rel="stylesheet" type="text/css" href="../usermods/stylemy.css" media="all">
<link rel="stylesheet" href="../menu/menu.css?v4" type="text/css" media="screen"/>
<style>
<!--[if IE]>
body {
background-color: #ED7ED7;
background-image: url(images-common/bgrd.jpg);
background-repeat: repeat-x;
dropdown_4columns {width:56ypx !important;}
behavior: url("http://wwww.itsjust4me.com/menu/csshover3.htc");
}
<![endif]-->
</style>
In Body
<ul id="menu">
<li class="single">Home
<li class="single">Products
<li>Shop By Category
<div class="dropdown_4columns">
<div class="col_1">
<ul>
<li class="lessline">Personalized Step Stools</li>
<li class="lessline">Personalized CD's</li>
<li class="lessline">Personalized Name Puzzles</li>
<li class="lessline">Personalized Coat Racks</li>
<li class="lessline">Personalized Kids Scrubs</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="lessline">Personalized Name Trains</li>
<li class="lessline">Personalized Crayola</li>
<li class="lessline">Personalized Sports Gifts</li>
<li class="lessline">Personalized Backpacks</li>
<li class="lessline">Fathead Decals</li>
</ul>
</div>
<div class="col_2">
<a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html" alt="Fathead Decals, Personalized Stools, Personalized CD's"/><img src="http://www.itsjust4me.com/prodimages/Fathead-Kids-sm.jpg" width="260" class="" alt="Fathead Decals" border="0"/></a>
<span style="width:100%; height:2px;"> </span>
</div>
<div class="col_4">
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/prodimages/Personalized-Stools-Img1.png" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/>
</div>
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/Scripts/images-common/hpcd.jpg" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></div>
</div>
</div>
</li>
<li>Shop By Theme
<div class="dropdown_2columns">
<div class="col_2">
<h2>Coming Soon</h2>
</div>
</div>
</li>
<li class="single">FAQ</li>
<li>Shipping
<div class="dropdown_4columns align_right">
<div class="col_4">
<H2>Product Delivery Times</H2>
</div>
<div class="col_4">
<table style="width: 100%; margin-top:-5px;">
<tr>
<th align="center">Product Type</th>
<th align="center">Manufacturing / Processing</th>
<th align="center" style="border-right:none !important;">Shipping</th>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized CDs</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Books</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Step Stools</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Boards</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Coat Racks</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Clocks</th>
<td align="center" class="menutableright">5-7 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Trains</th>
<td align="center" class="menutableright">2-5 Days</td>
<td align="center">3-4 Days</td>
</tr>
</table>
</div>
</div>
</li>
<li class="menu_right search"><form method="post" action="/scripts/chshowinfo.php" style="width:156px !important;">
<input name="txtsearch" id="txtsearch" style="border: 1px solid rgb(177, 13, 144); border-radius: 4px 4px 4px 4px; text-align: left; margin-top: 3px; padding: 4px 0px 4px 2px;" placeholder="Search Products" type="text" value=""/>
</form>
</li>
</ul>
#Sven You hit it right on the head! The DOCTYPE was declared but it was placed below some ASP includes... moved it to the top of the page & it did the trick!