I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout.
I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...
How can I place one table within another table on top and in the center?
To illustrate I've posted this fiddle:
http://jsfiddle.net/eabJh/1/
The <td >Another nested table</td> is in center position but not on top but in the middle.
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body style="background-color: black">
<table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg" width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
<tr style="height:400px">
<td>test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td >Another nested table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</html>
Updated Fiddle
Use valign = "top":
<td valign = "top">test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td>Another nested table</td>
</tr>
</table>
</td>
Related
The minimal code is given below. Note that -
I need 1px border(I think that means need border-collapse).
Also transition and background-color change cannot be compromised.
CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th, td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
We have w2ui dropdown element on our web site, and I want to run script using selenium IDE for testing, I have recorded steps but getting error when I run that script(element not found). Is there any way to handle w2ui element in Selenium IDE (specially dropdown list). I have tried xpath, still doesn't select value in the drop-down list.
There can be cases where Selenium IDE recorded may not able to correctly identify the element. In these cases, user need to modify the script to ensure that elements are correct identified and entered.
Please refer below example. Recorded script did not work to select the w2ui drop list. I updated the script such that it correctly identifies the element and select it.
Can you please also update your script such that when execute IDE works on correct element?
Record script in Selenium IDE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://w2ui.com/" />
<title>Recorded Script</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Recorded Script</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/web/docs/form/fields-list</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=input[type="text"]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=tr.w2ui-item-odd.w2ui-selected > td.menu-text</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>//input[#type='combo']</td>
<td>Testing</td>
</tr>
</tbody></table>
</body>
</html>
Updated Script
I modified the script to correctly identify the w2ui drop list by class name and correct input field the drop list. This script is working fine when I run in Selenium IDE.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://w2ui.com/" />
<title>Updated script</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Updated script</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/web/docs/form/fields-list</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>class=w2ui-icon icon-search</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>class=w2ui-select w2field</td>
<td>Andrew Johnson</td>
</tr>
<tr>
<td>storeValue</td>
<td>class=w2ui-select w2field</td>
<td>x</td>
</tr>
<tr>
<td>echo</td>
<td>${x}</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>//input[#type='combo']</td>
<td>Testing</td>
</tr>
<tr>
<td>storeValue</td>
<td>//input[#type='combo']</td>
<td>y</td>
</tr>
<tr>
<td>echo</td>
<td>${y}</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I got the solution using JavaScript. Command- runScript and Target- document.getElementById('DropdownId').value='Dropdown item value' by using this its getting selected.
I have come across a scenario where we have to enter the any text in the search textbox say for example ww enter "Context" in the search text box and then we have to verify the first link in the search page to be "ConTEXT". I am using various verify commands like verifyText, verifyTextPresent, verifyElementPresent. But its showing false when i am runnig using selenium IDE.How could I verify the first link is "ConTEXT"?
Thanks in advance
You need to wait the result element with the waitForElementPresent. You can see the full test code at the following.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://www.google.com/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/?gws_rd=ssl</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=gbqfq</td>
<td>ConTEXT</td>
</tr>
<tr>
<td>click</td>
<td>id=gbqfb</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>css=div.vk_ans > span</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>css=div.vk_ans > span</td>
<td>con·text</td>
</tr>
</tbody></table>
</body>
</html>
I had problems with backgrounds not showing in most E-Mail clients such as GMail or Yahoo Mail but I found this thread and problem solved by replacing (although I lost some properties like background-repeat and position) <table style="background: url('bg.png');"> to <table background="bg.png">.
But now I'm facing the same problem in Hotmail and none of the above form of codes seems to work.
This page is the reference of answers to most similar questions in stackoverflow, and it says that Outlook.com (new hotmail) does not support css background and I should use background attribute instead, but mine is not working.
What I'm doing wrong?!
Outlook only supports background in the body tag.
Two ways to go for email backgrounds:
Via VML: emailbg.net
or here is the less fancy way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/100/100/food/'); background-color: #252525; background-repeat: repeat-y no-repeat; background-position: top left;" bgcolor="#252525">
<!-- BODY FAKE PANEL -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/100/100/food/">
<tr>
<td valign="top">
<!-- CENTER FLOAT -->
<table width="600" height="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
I have table with one one row and one cell.With in that cell some text and another table is there.What I am expecting is that the inner table should come at right to text,but its going to next line.How to achieve that?
Here is my code...
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<table border="1">
<tr>
<td>
Here is some text
<!-- Inner Table. This table should come at right to the above text-->
<table style="border:1px solid blue;">
<tr>
<td>1</td>
<td>Krish</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
you should specify float:right or float:left
As per your html, specify table with float:right as
<table style="border:1px solid blue;float:right;">