All,
This xpath locator works fine in Firefox:
ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
This does not work in IE. I have been trying to convert to CSS locator
without success. The item I am trying to select is Seller. Here's the
whole blob:
<div style="width: 168px; overflow: auto; height: 107px; padding-right: 0px;" class="dxlbd" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_D">
<input type="hidden" name="ctl00$ctl00$mainPage$rightColumn$wholeControl$grid$cell2_3$roleX$DDD$L" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_VI" value="0">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: separate;" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBT">
<tbody>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemSelected" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI0T0">Choose</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI1T0">Buyer</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemHover" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0">Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI3T0">Buyer & Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI4T0">Observer</td>
</tr>
</tbody>
</table>
</div>
Any ideas greatly appreciated.
Blake
There are a few ways that you could locate the seller cell. To locate it using CSS based on the content of the cell try:
css=td:contains(Seller)
If the id is static then the following should also work, however the id is unusually long, which could conceivably cause issues. I haven't tested this myself.
id=ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
Related
I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I just finished the html portion of my table and need help with the css portion of it. The table can be found on this page: https://www.shiftins.com/test-page-1/.
My issue is with the alignment. I can't seem to figure out how to get
the div "tbl-header" to align with div "tbl-content".
Also, I would like to know how to reduce the white space in between the county/city column and the start of the data set by slightly increasing the cell width into this space. How would I go about doing that for both sections of the table to keep everything aligned properly?
The biggest problem I see is that your top row is in a different table than the rest of your data. You either need to specifically assign widths to each column, or put everything in the same table like this:
jsFiddle
<table class="sortable" cellpadding="0" cellspacing="0" border="0" style="width:80%;">
<tbody>
<tr>
<td style="text-align: left;"><strong>County / City</strong></td>
<td style="text-align: left;"><strong>200k</strong></td>
<td style="text-align: left;"><strong>300k</strong></td>
<td style="text-align: left;"><strong>400k</strong></td>
<td style="text-align: left;"><strong>500k</strong></td>
<td style="text-align: left;"><strong>750k</strong></td>
<td style="text-align: left;"><strong>Average</strong></td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA ALAMEDA</td>
<td style="text-align: left;">813.40</td>
<td style="text-align: left;">1144.72</td>
<td style="text-align: left;">1329.03</td>
<td style="text-align: left;">1636.41</td>
<td style="text-align: left;">2088.74</td>
<td style="text-align: left;">1402.46</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA BERKELEY</td>
<td style="text-align: left;">920.11</td>
<td style="text-align: left;">1297.82</td>
<td style="text-align: left;">1519.37</td>
<td style="text-align: left;">1872.77</td>
<td style="text-align: left;">2363.37</td>
<td style="text-align: left;">1594.69</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA FREMONT</td>
<td style="text-align: left;">735.92</td>
<td style="text-align: left;">1033.36</td>
<td style="text-align: left;">1203.48</td>
<td style="text-align: left;">1483.00</td>
<td style="text-align: left;">1871.16</td>
<td style="text-align: left;">1265.38</td>
</tr>
</tbody>
</table>
First of all, a recommendation to create tables, try to avoid put in headers in <div> tags and the data in other table, its better keep all the information in one table structure like this:
<table>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
a <th> tag is a table headings, <tr> table rows and <td> table data
That's why the size of your table don't fit, so after made this change you can add css style of your table and works with the size of the rows http://www.w3schools.com/css/css_table.asp
How to do an (X)HTML5 table:
<table>
<colgroup style="width: 10%;"></colgroup>
<colgroup style="width: 30%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<thead>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</thead>
<tfoot>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</table>
If you want the fixed header, you need to use 2 tables and assign fixed widths so that everything will line up.
jsFiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table alignment</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="shawn">
<style>
.aligned td{
width:14% !important;
}
.aligned{
width:70%;
margin-left:auto;
margin-right:auto;
}
.header{
background:#0000ff;
color:#fff;
line-height:30px;
height:30px;
font-weight:bold;
width:70%;
left:15%;
top:0;
position:fixed;
}
.clr30{
clear:both;
height:30px;
}
</style>
</head>
<body>
<table class="aligned header">
<tbody>
<tr>
<td>County / City</td>
<td>200k</td>
<td>300k</td>
<td>400k</td>
<td>500k</td>
<td>750k</td>
<td>Average</td>
</tr>
</tbody>
</table>
<div class="clr30"></div>
<table class="aligned">
<tbody>
<tr>
<td>ALAMEDA ALAMEDA</td>
<td>813.40</td>
<td>1144.72</td>
<td>1329.03</td>
<td>1636.41</td>
<td>2088.74</td>
<td>1402.46</td>
</tr>
<tr>
<td>ALAMEDA BERKELEY</td>
<td>920.11</td>
<td>1297.82</td>
<td>1519.37</td>
<td>1872.77</td>
<td>2363.37</td>
<td>1594.69</td>
</tr>
<tr>
<td>ALAMEDA FREMONT</td>
<td>735.92</td>
<td>1033.36</td>
<td>1203.48</td>
<td>1483.00</td>
<td>1871.16</td>
<td>1265.38</td>
</tr>
<tr>
<td>ALAMEDA HAYWARD</td>
<td>779.26</td>
<td>1091.57</td>
<td>1269.92</td>
<td>1565.50</td>
<td>1993.72</td>
<td>1339.99</td>
</tr>
<tr>
<td>ALAMEDA LIVERMORE</td>
<td>689.70</td>
<td>973.33</td>
<td>1140.16</td>
<td>1410.07</td>
<td>1762.98</td>
<td>1195.25</td>
</tr>
</tbody>
</table>
</html>
</body>
As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>
Hotmail does not support margin in HTML emails. Is there an alternative?
I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.
As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.
Note:
When it comes to email HTML, note that all best practices from web development goes out the window.
Here is an example using tables,
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
<tr>
<td colspan="5" style="padding:15px 0;">
<h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
</td>
</tr>
<tr>
<td style="width:15px;"> </td>
<td style="width:375px;">
Left Column Content
</td>
<td style="width:15px;"> </td>
<td style="width:180px;padding:0 0 0 0;">
Sidebar Content
</td>
<td style="width:15px;"> </td>
</tr>
<tr>
<td colspan="5" style="padding:15px 0;">
<p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
</td>
</tr>
</table>
Live here http://jsfiddle.net/Wr76m/
I was able to get away with transparent horizontal bars, using padding to modify the height. For example:
<hr style="border: transparent; padding: 1px;">
I want to get the Name and Description in the center of the columns..
I tried a lot but no luck... I know this is silly doubt but I am stuck...
Here is the .aspx code:
<!-- <table cellpadding="3" cellspacing="4" align="center"
style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%" align="center" >
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%">
Description</td>
</tr>
as you can see I have also tried align.. it still does not work.
Try using the text-align CSS property:
<table cellpadding="3" cellspacing="4" align="center" style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:center">
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:50%">
Description</td>
</tr>
In what way is it not working?
What you have done should be displaying 'Name' centered, if not then it's possibly being affected by your css and the inline style approach SLaks has shown will fix it.
If your problem is that you want all text in those columns to be centered then try.
<table>
<col align="center" />
<col align="center" />
<tr>