See jsfiddle here
The selector highlights all tables rather than the one it should be selecting. It only does this for the first list item. If I move selected="selected" to another list item, I don't have the issue. I don't see this issue in ff for ie.
Am I doing something wrong, or is this a new bug?
css
li[selected="selected"] table
{
background:yellow;
}
html
<li selected="selected">
<a href="#">
<table>
<tr>
<td>
Row 1 - Col 1
</td>
<td class="second">
Row 1 - Col 2
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#">
<table>
<tr>
<td>
Row 2 - Col 1
</td>
<td class="second">
Row 2 - Col 2
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#">
<table>
<tr>
<td>
Row 3 - Col 1
</td>
<td class="second">
Row 3 - Col 2
</td>
</tr>
</table>
</a>
</li>
I think the answer is that selected is not a valid attribute for an <LI> tag. Chrome is (right or wrong) simply ignoring that element in your CSS.
If you used class instead, then you could select it correctly in all browsers: http://jsfiddle.net/SReUe/
Have you tried making your selector a little more specific?
EG: li[selected="selected"] table td
Related
I put a link in a table cell, and it didn't work. I tried it with a javascript function to open a window, which I would prefer, but that didn't work either. So I looked around for info and found this SO page: How can I make a link from a <td> table cell.
I tried every method there that seemed applicable, plus some variations on those methods, but none of them worked at all; although I did get a simple demo to work. The suggestion made to me on that page is that something else in my code is causing the problem, which seems likely to me.
I'm putting the code below, and maybe someone can help? I don't care what kind of link it is --- whether the entire cell, or just the words -- as long as it takes me to the desired page.
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<p class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
<li>Item 3 yet more text</li>
</ul>
</p>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
Here is where I want the link -- the code shown is one of the suggestions, but it doesn't work for me:
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td
</tr>
(Hoping the above code is correct. Small errors in the tr and td tags don't seem to make a difference, but could be misleading.)
Error is related to element structure. 'P' element can not be child of 'ul'. Others are due to similar tag and scope mismatch.
Just refined the code. It's working here
Blockquote
<body>
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<div class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
</ul>
</div>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td>
</tr>
</table>
</td>
</tr>
</table>
working example here
https://jsfiddle.net/aman9753/jya5L1t5/
I'm trying to get the social media sprites in this HTML table at https://www.alexcurriemedia.com/video/ to press up flush with the image above it. Cannot figure out a way to do this.
Can't add another table above it because the upper image is a wordpress shortcode that doesn't seem to work within the table.
Here is the code:
<table><center>[wds id="3"]
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>
Thanks so much!!
The stray <p> tags that you see are likely a result of Wordpress automatically inserting them through the text editor. You should not place a <div> inside of an <a> tag if at all possible. While technically valid, I've seen it cause problems with things such as Wordpress's text editor. If you look at the source code in your browser, you will notice that the link is actually being rendered twice, like so:
<td nowrap="">
<a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p>
<div class="sprite Twitter1"></div>
</a>
<p>
</p>
</td>
The following code should work better:
<table>
<tbody><tr>
<td nowrap>
</td>
<td nowrap>
<a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a>
</td>
</tr>
</tbody>
</table>
Once you change that, simply add the following to your CSS:
.sprite {
display: block;
}
This will cause the content in each <td> to align at the top, rather than in the center as they are doing currently.
If you still have trouble with the <p> tags being automatically inserted, you may look into this function.
End result:
I am creating a newsletter template with full CodePen example
I have a few Table rows as follows:
<tr>
<td class="snip" valign="top">
<table class="snip" style="padding-left: 8px;">
<tr>
<td>
<img src="http://placehold.it/40x32" style="padding: 4px">
</td>
</tr>
<tr>
<td>
THIS IS THE TITLE 1
</td>
</tr>
<tr>
<td>
<span>THIS IS THE LINK 1 FOR TITLE 1</span>
<br>
<span>THIS IS THE LINK 2 FOR TITLE 1</span>
<br>
<span>YET ANOTHER LINK FOR TITLE 1</span>
<br>
<span>ONE MORE LINK FOR TITLE 1</span>
<br>
<span>AND THE LAST LINK FOR TITLE 1</span>
</td>
</tr>
</table>
</td>
</tr>
Somehow when I resize the browser to a specific width I get:
You can see that the last TD goes to a next row ...
How can I solve this problem? I can't find the solution ...
look this, I set two different tr with class
http://codepen.io/anon/pen/iyEmK
#media only screen and (max-width : 600px) {
tr.myTR {float:none;display:block;clear:both} }
Use min-width instead of width
table[class="snip"] {
min-width: 50% !important;
}
http://codepen.io/anon/pen/dzGKo
You can add
td[class="snip"]:nth-child(2n+1) {
clear: left;
}
so that the narrow screens have rows of two elements.
Demo at http://codepen.io/gpetrioli/pen/lbxEe
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.
I have a table of records which is displayed nicely in a HTML Table.
The last column of this table displays a icon when hovering the row. When the user hovers the icon a drop down menu appears for all actions related to that row.
Currently I have the td that Icon is in set to Position:absolute and the div of the drop down menu is also set to Position Absolute.
This means I can align the Dropdown Menu Div to align nicely against the row it relates.
Firstly im not totally sure why this is the case. I would have thought I would need the TD as Absolute and the Menu Div as Relative but this just isnt the case.
The actual issue I am currently having (as the way I have it works across all browser) is that when the row is expanded to be double the height from text in other columns. The TD with absolute positioning applied does not expand to be 100% height of the TR. Which causes issues when trying to hover the tr and you move over where the last TD which should have expanded to the row height and it registers it as a hover out on the TR.
Any ideas to get around this?
The problem with putting the icon in a div which is relative is that I need the div to be 100% height/width of the td to be able to align the menu correct to the row!
EDIT:
As requested Some Html... This is a mustache template. Shouldn't be to hard to follow even if you have never used it
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
I would get rid of the table all together. I would then use divs with table behavior. This will give you much more control over how each element works, each row, and each column.
This link explains the concept quite well: http://snook.ca/archives/html_and_css/getting_your_di
You might try this::
<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
Tutorials<br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu">HTML</td></tr>
<tr><td class="menu">CSS</td></tr>
<tr><td class="menu">XML</td></tr>
<tr><td class="menu">XSL</td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
Scripting<br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu">JavaScript</td></tr>
<tr><td class="menu">VBScript</td></tr>
<tr><td class="menu">DHTML</td></tr>
<tr><td class="menu">ASP</td></tr>
<tr><td class="menu">ADO</td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
Validation<br>
<table class="menu" id="validation" width="120">
<tr><td class="menu">Validate HTML</td></tr>
<tr><td class="menu">Validate XHTML</td></tr>
<tr><td class="menu">Validate CSS</td></tr>
<tr><td class="menu">Validate XML</td></tr>
<tr><td class="menu">Validate WML</td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>