So, I recently took over managing the website for our robotics club. I have the most experience in web development in the room, though I haven't used it in a while so I am a bit rusty on some of the obscure details and stuff.
I've been trying to run through and remove all the unnecessary garbage the creator of the website used/left in, and I came across an issue that he was having, which nobody could figure out.
He was trying to format some information about the competition our school hosts in a data table, which can be seen here (I am posting the section and all the other content in that section, including the table, in case it is of any use):
<section id="news" class="container content-section trans-section text-center" style="position: relative;padding-top: 55px;">
<div class="row"><div class="col-md-offset-4 col-md-4"><h2 class="text-center">Additional Updates & Information</h2><br><div class="line"></div></div></div>
<br><br><br>
<div class="row text-left" style="padding-left: 80px;">
<div class="col-md-11">
<h2 class="text-left">Updates</h2>
<div class="line-alt"></div>
<div class="row">
<ul style="font-size: 1.6em; font-family: 'Lato'; font-weight: 300;">
<li>The number of SweeperBot matches has been changed from 2 to 3.</li>
<li>SweeperBot matches will run in the morning. Each robot will run through the field once and then initial rankings will be posted. Each robot will then run a second time and rankings will be updated. Each robot will then go through a third and final time.</li>
<li>We are planning on a double elimination format for the SumoBots. Some of the early SumoBot matches will run in the morning concurrently with the SweeperBot matches.</li>
<li>We will release the schedule for the day as we get closer to the date and get a firmer handle on the total number of teams.</li>
</ul>
</div>
<br><br>
<table class="table table-striped table-bordered table-condensed" style="border: 1px solid #3c3c3c !important;">
<caption style="align: top;">Schools Attending The Competition</caption>
<tr>
<td style="font-weight: 500;">School Name</td>
<td style="font-weight: 500;">Number of SumoBots</td>
<td style="font-weight: 500;">Number of SweeperBots</td>
</tr>
<tr>
<td>Bishop Shanahan High School</td>
<td class="success">3</td>
<td class="success">3</td>
</tr>
<tr>
<td>George School</td>
<td class="success">5</td>
<td class="success">3</td>
</tr>
<tr>
<td>Methacton High School</td>
<td class="success">4</td>
<td class="success">2</td>
</tr>
<tr>
<td>Pennridge High School</td>
<td class="success">4</td>
<td class="success">0</td>
</tr>
<tr>
<td>Plymouth Whitemarsh High School</td>
<td class="success">1</td>
<td class="success">1</td>
</tr>
</table>
<p style="font-family: 'Lato'; font-weight: 300;">*Actual number of robots subject to change as we approach April 16th.</p>
</div>
</div>
</section>
The issue that he came across is the the table does not format properly in Chrome, but it works fine in Edge and even IE. Haven't tested it with Firefox, because it is not installed, but nobody has said anything about any browser other than chrome.
The table, in chrome, shows up as a straight up and down, one columned table. The data is still in the proper order, but not arrangement. I would imagine that this is an issue someone else has experienced before, but I haven't and I couldn't find a good post that addressed this issue.
Can anyone help me out?
You have display: block; attached to your td on your site. This causes the td to behave as a block element instead of display: table-cell. Remove that, and the td elements will behave as expected.
Specifically, it looks like it is line 104 in your stylesheet named "style.css".
Related
I have multiple tables where I am trying to read the rows together. Here is an example table:
<table class="data-table" role="presentation">
<tr role="rowgroup">
<td role="gridcell">
<strong>Name</strong>
</td>
<td role="gridcell">
John Doe
</td>
</tr>
<tr role="rowgroup">
<td role="gridcell">
<strong>Size</strong>
</td>
<td role="gridcell">
XL
</td>
</tr>
<tr role="rowgroup">
<td role="gridcell">
<strong>Color</strong>
</td>
<td role="gridcell">
blue
</td>
</tr>
</table>
In this rendered example, This should read the first the full row "Name - John Doe". It works as intended on Chrome but fails to read the full row with IE11. Is there a reason why that is happening?
Edit, I looked into it further and it seems to happen if the table is wraped with a tag. Not sure why it is happening but at least I can repoduce the issue more consistently.
This markup is quite complex and I'm not sure what you're aiming to achieve.
This seems like a data table to me. Could you remove the role="presentation" so that the table is exposed to AT as a data table, then mark the first column up as <th> column headers, and the second column as <td> cells? That way you don't need to try and control what the screenreader says and when, and you're using semantic markup.
Most screenreader users know how to interact with data tables to extract the information they need, and trying to mask this interaction and control the user experience is unlikely to work out well.
Trust your users :-)
I'll admit, I'm not very experienced with writing code in general - I do it on a per-needed basis. Our company is researching different frameworks for writing code for emails. We stumbled across Zurb Foundation. I thought, great, it will make writing a lot less convoluted. Then, while going through the tutorials, I see this for making JUST A BUTTON:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<table class="button float-center">
<tr>
<td>
<table>
<tr>
<td>Centered Button</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
WHY..?? Why does it seem that in coding everything has to a table within a table within a table header, within a table row, within a table cell, within a table row. It goes on forever and literally makes me angry when I look at that. I don't see why making a simple button cannot be 1 line of text, that's it.
Why does code have to be so long and convoluted for the simplest things?
Foundation Emails uses Inky - a custom template language (like all other email frameworks), which generates this for you.
https://foundation.zurb.com/emails/docs/inky.html
Emails are a different beast and if you hand write tables this is common. As Daniel pointed out, Inky is the way to avoid this mess.
I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555"> Test.</p>
<div style="font-size: 10pt;color:#555">
<p> There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
I have been trying to get text after a table in HTML but for some reason I cannot get this to work. I have tried using div, padding and margin on the table but nothing seem to work. No matter what I do the text always end up behind the first row of the table unless I use </br>.
Here is my HTML:
<div>
<h2 align=left>1. Delivery schedule</h2>
<body> The table below list the various delivery cycles per store:</body>
<br>
<br/>
<p>
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
Your code is bleeding from many wounds. First of all, you should forget about the align attribute, and use a CSS class instead.
.align-left {
text-align: left;
}
<h2 class="align-left">1. Delivery schedule</h2>
Then, you have an unclosed <p> tag right before your table, which could be causing your problem. Having invalid markup can lead to unexpected results. And finally, importantLink - depending on your <!DOCTYPE> - is likely not valid (you have a doctype, right?). Use a standard element like an <a> tag, which actually means that it's a link, and if you want to be able to tell it apart from the rest, use a class or id tag to give it a reusable/unique name, respectively. In your case, the text you are presenting in that tag is nothing like a link, so I suppose a <p> tag is the most suited for your case.
<p class="importantLink">Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</p>
usually html elements go one after another unless you give an element a property such as float:left or float:right or in your case align:left so elements after the table won't be under that table, they will be positioned on it's right and from the top.
if you want that link to be after the table (under that table) remove the align:left from the table,
and when writing HTML make sure the opening and closing tags are the same and that your content is inside the body tag, here is the correction for that:
<html> <!--<div>-->
<body>
<h2 align=left>1. Delivery schedule</h2>
<p> The table below list the various delivery cycles per store:</p>
<br>
<br/>
<div><!--<p>-->
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
</body>
<html>
this line <table border="1" align="left" width="61%" height="100px" frame="border">
is causing your issue, either remove align:left or change <importantLink> to <importantLink style="clear:both">
If you want the text within the <importantLink> to be displayed below the table you insert text in a div tag as below:
<div style="clear:both">
<importantLink>Your text comes here....</importantLink>
</div>
Replace your importantLink with the three lines of code above.
recently I find that new version of firefox is show width, significantly different from chrome
this is my table which show completely different in fire fox and chrome . Is there any idea for this case?
<table id="headtable" class=" tahoma">
<tr>
<td width="84">نام سرور</td>
<td width="62">CPU</td>
<td width="46">RAM</td>
<td width="34" class="tool-tip">نوع هارد دیسک </td>
<td width="79">فضا</td>
<td width="43" class="tool-tip">پهنای باند </td>
<td width="46" class="tool-tip">ترافیک ماهیانه </td>
<td width="59">دیتا سنتر</td>
<td width="69" class="tool-tip">کنترل پنل </td>
<td width="47" class="tool-tip">هزینهی راه اندازی </td>
<td width="54">هزینهی ماهیانه</td>
</tr>
</table>
<div class="hole" id="hole">
<table id="panels-compare" class="tahoma compare panels">
<tr>
<td width="66">ایران۷</td>
<td width="62">Xeon 3430</td>
<td width="46">۸ گیگابایت</td>
<td width="58">SATA</td>
<td width="81">2x500GB</td>
<td width="43">۱۰۰ مگابیت</td>
<td width="46">۱۰۰ گیگابایت</td>
<td width="59">پارسآنلاین / افرانت</td>
<td width="69">DirectAdmin</td>
<td width="46">۵۰,۰۰۰</td>
<td width="54">۳۵۰,۰۰۰</td>
<td width="">سفارش</td>
</tr>
</table>
</div>
Weird. That can't be the code for the image as displayed, so I'm going to take a guess... Maybe you missed a column, it looks like some are the same size and others are not. Or, maybe the sum of the td widths is greater than one if its containing elements, and the browsers are responding to the invalid state differently. Similarly, it may be that invalid html elsewhere on the page is behind this - if all else fails, ensure your markup is valid.
It all depends on the "clutter" a browser has.
Google chrome has "clean" UI, it doesn't take up too much space for its address bar, bookmark bar etc..
Whereas Mozilla too has its own way of displaying things.
So there is no standard that defines how much screen a browser should use for address bar, bookmarks bar, home button, back-front buttons, tabs etc..
So just leave it as there is not much you can do other than what you've already done to have a uniform size.