Ok so I have a few tables on a page and one of them is giving me trouble. It is the second table on the page The left column is how I want it, the other appears to be centering the data within the table row. I don't understand why, I don't think its CSS from the WordPress template because if I launch it as a raw HTML file in my browser it is doing the same thing. Here is the link to the resulting page with the tables (second table down): http://titanpropertymanagement.co/residents/utility-info/
I know this issue is probably super simple but I am still learning to code so I'm sure it's just missing a simple style tag. Thanks for any help you can provide :)
Here is the code for the second table giving me issues
<h2 style="text-align: center;">Water & Trash Service</h2>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<h4>Water/Trash for Lafayette</h4>
<h5><span style="text-decoration: underline">Lafayette Utility Dept.</span> - (765) 807-1100</h5>
<ul>
<li><span style="text-decoration: underline">Download Application Here
</span>
</li>
</ul>
<h5>Lafayette Sanitation - (765) 807-1411</h5>
<ul>
<li><span style="text-decoration: underline">Request Trash/Recycle Bin</span>
</li>
</ul>
<h5>Waste Management - (800) 443-5646</h5>
<ul>
<li><span style="text-decoration: underline">Request Service Online</span>
</li>
</ul>
</td>
<td width="50%">
<h4>Water/Trash For West Lafayette</h4>
<h5><span style="text-decoration: underline">American Water</span> - (800) 492-8373</h5>
<ul>
<li>Request New Service Online
</li>
</ul>
<h5>W. Lafayette Sanitation - (765) 775-5242</h5>
<ul>
<li>Request Service Online
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Add
tbody {
vertical-align: top;
}
to your stylesheet. This will override the browser's default styling of tbody, which is to vertically align the tbody to the middle (at least in Chrome).
Related
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
I want to use a CSS selector to select the only li that is a direct child of a TD tag and its parent td tag has Sector text in it. Basically, I want my second li should be selected.
Because there are two <ul> elements with the class field-items and the <li> elements are nested inside the <ul> you will need to select the correct parent <ul> element and then select the <li> from there. You can use the nth-of-type(n) selector in order to achieve that in this case, if you know that you want to select the 2nd <li>.
.field-items:nth-of-type(2) .field-item {
color: red;
}
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
However, you cannot retrieve a specific element basing on it's text content using plain CSS, you will need to have some Javascript code that does that for you. Like this:
document.querySelectorAll("strong").forEach((el) => {
if (el.textContent === "Sector") {
el.closest("td").querySelector(".field-item").style.color = 'red';
}
});
<table>
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
</table>
Our loading crew is using different WYSIWYG HTML editors to prepare an offers. Unofrtunatelly the result code is usually not optimized and it demands a lot of space in our db.
Example codes:
<ul style="font-size: 13.3333px;">
<li><span style="font-size: 10pt;">qwe</span></li>
<li><span style="font-size: 10pt;">asd</span></li>
<li><span style="font-size: 10pt;">zxc</span></li>
<li><span style="font-size: 10pt;">qwer</span></li>
<li><span style="font-size: 10pt;">asdf</span></li>
</ul>
or
<span style="font-size: 13.3333px;">lorem</span>
<div style="font-size: 13.3333px;"><br></div>
<div style="font-size: 13.3333px;">ipsum</div>
is there any useful lib/script which can optimize those styles before saving it to db?
So it looks like it's the inline styles that you'd like to get rid of. There's an online tool called HTML cleaner that can do this for you: HTML Cleaner Remove Inline Styles.
i am using the font awesome icon ellipsis-v (which is very tiny; see here) in a clickable row, so it's frustrating to click, because most of the time you end up clicking on the row.
i tried putting the link on the td, but it's not working (because the whole row is clickable?).
are there any css tricks to increase the clickable area around the fa-icon?
(below the code i tried)
<tr class='clickable-row' data-href='details.html'>
<td></td>
<td class="client-status"><span class="label label-warning"></span></td>
<td>
<a class="doDropdown">
<div class="ibox-tools">
<a class="dropdown-toggle doDropdown" data-toggle="dropdown">
<i class="fa fa-ellipsis-v"></i>
</a>
<ul class="dropdown-menu">
<li>
View
</li>
<li>
Edit
</li>
</ul>
</div>
</a>
</td>
</tr>
Try adding the property line-height or font-size on <i> tag:
Example:
i {
line-height: 20px;
font-size: 20px;
}
You can simply add fa-nx inside the icon class, where n is the number and it simply increases the icon's size by n times its original.
Below n is 2. You can use 3, 4.. depending on your design.
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
I am writing an app that uses Boostrap 3.3. It also uses open source material design framework. My app has a table that lists users. Each row in the table has a picture, a person name, an email address, and an action menu. Here is my current code:
<table class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><div><i class="material-icons">person</i></div></td>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>
<div class="dropdown">
<i class="material-icons">more_vert</i><div class="ripple-container"></div>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
The action menu opens left-aligned against the menu icon. However, I'm trying to make it right-aligned so that the content opens to the left. The behavior of the right "Dropdown" link in the Navbar section of the example is what I'm trying to reproduce. Yet, I'm not having any luck. I added a float:right on the ul without any luck. What am I missing?
In Bootstrap there is a class called dropdown-menu-right. If you add this to your dropdown menu, the menu will appears on the right side instead off on the left (by default).
Simply replace this:
<li class="dropdown-menu">
With:
<li class="dropdown-menu dropdown-menu-right">
See reference: http://getbootstrap.com/components/#dropdowns
Note: the .pull-right is now deprecated to dropdown menus in bootstrap V3.1.0.
for example what is the accessible way to code this design.
alt text http://easycaptures.com/fs/uploaded/220/0715108922.png
currently my company's CMS producing this HTML for this design
<div id="presentationsContainer">
<div class="ItemsContainer">
<div class="presentationsItemContainer">
<div class="TitleContainer">
Presentation October 2009</div>
<div class="MediaContainer">
<a target="_blank" href="Presentation.ppt">Download PPT </a>
</div>
</div>
<div class="presentations">
<div class="TitleContainer">
May 2009</div>
<div class="MediaContainer">
<a target="_blank" href="2009.ppt">Download PPT </a>
</div>
</div>
<div class="presentations">
<div class="TitleContainer">
March 2009</div>
<div class="MediaContainer">
<a target="_blank" href="2009.ppt">Download PPT </a>
</div>
</div>
<div class="presentations">
<div class="TitleContainer">
Results Presentation September 2008</div>
<div class="MediaContainer">
<a target="_blank" href="2008.ppt">Download PPT </a>
</div>
</div>
</div>
</div>
like <table> is not good for screen reader user then what will happen to screen user with lots of non semantic div tags are both will create problem for screen reader user or non semantic div creates less problem than properly markup
What should be use for accessibility and if css would be disabled then which code technique will keep understandable formatting?
IMO any of the 3 ways is fine. I could argue any one of them to be better then the other 2.
Myself would go with the list just because its less code when I'm looking at it.
<ul id="presentationsContainer">
<li>
Presentation October 2009
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
</li>
<li>
Presentation October 2009
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
</li>
<li>
Presentation October 2009
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
<span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
</li>
</ul>
[EDIT] Adding the additional download ppt can still be done by just adding another span to each li. I am assuming that to get the pdf download your floating the span to the right and giving it a width. This way adding another column is not any more css code. Hell you could even remove the span and add that style to the a tag. assuming no links are in that first column.
However if you want to change it to a table (which may be a better choice with more columns) you can just do something like this: you can already see how much more code there is to look through though.
<table id="presentationsContainer">
<tr>
<td class="main" width="60%">Presentation October 2009</td>
<td class="dl" width="20%">Download pdf</td>
<td class="dl" width="20%">Download ppt</td>
</tr>
<tr>
<td class="main" width="60%">Presentation October 2009</td>
<td class="dl" width="20%">Download pdf</td>
<td class="dl" width="20%">Download ppt</td>
</tr>
<tr>
<td class="main" width="60%">Presentation October 2009</td>
<td class="dl" width="20%">Download pdf</td>
<td class="dl" width="20%">Download ppt</td>
</tr>
</table>
That screen shot looks like a perfect candidate for a <table>. It will be easier to style, x-browser compatible, and with some headers completely accessible. It will also render pretty much the same if the css styling is removed.
That looks to me like an unordered list. Using div's like that is no better than using tables. Using an unordered list makes a lot more sense from a markup standpoint.
One thing that would be more accessible (or at least more in line with the W3C’s guidelines) is download links that make sense out of context.
So, instead of just:
<a target="_blank" href="2009.ppt">Download PPT </a>
You could have:
<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>