iPhone Bug with Html Tables and Anchors - html

I have a table with a list of items in it. Shown below.
The problem is when this table is displayed on the iPhone 5/4, it still shows up, but the thread "Last Post" is a much larger font. Its increased by maybe .3em. The second issue is when I click on the first link in the first column inside the iPhone, it doesn't actually work. None of the anchor tags work. Which is really weird and I just don't understand what is going on. Please help?
UPDATE
Here is a link to the CSS Doc. Just compare it to the calendarTable attributes.
https://league.rdnation.com/content/main.css
<table class="calendarTable" id="messages">
<thead>
<tr>
<th>Title
</th>
<th>Last Received
</th>
<th>Last Post
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="forumTopicRow calCurrentDateEvent">
<td>
<a class="b" href="/messages/view/16">Message Title</a>
</td>
<td>
5 minutes ago
</td>
<td>
asdfasdfasd by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Test1
</td>
<td>
10 months ago
</td>
<td>
Check it twice by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Message
</td>
<td>
10 months ago
</td>
<td>
This is a Message to by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Message
</td>
<td>
10 months ago
</td>
<td>
Do you like this by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Testing
</td>
<td>
one year ago
</td>
<td>
This is a new messa by <b></b>
</td>
<td>
</td>
</tr>
</tbody>
</table>

Hey mate I didnt see your code but recently I fixed my newsletter by adding
-webkit-text-size-adjust:none;
in your td style
I had the same problem.
Try it might be the issue.

Well, going through your css, the only thing I saw that may cause an issue for you is, (After doing find table in the document.) The 6th (found word) of table that popped up, with table headers as well, has a font-size of 100%. That's a pretty risky move and chances are one of your table headers is taking on a different size within the iphone, (even if you can't see it.) causing your font size to increase. To see if that's correct simply change the text size to something other than a percentage to test.
As far as link goes, i'm pretty sure you're sending them to the wrong place...
remove the / at the beginning of your links and you should be fine.

Related

HTML validation error: table row has no cells beginning in it

<table border="1">
<tr>
<td rowspan="4">A</td>
<td colspan="5">B</td>
</tr>
<tr>
<td colspan="3">E</td>
<td rowspan="2">F</td>
<td rowspan="4">C</td>
</tr>
<tr>
<td rowspan="2">G</td>
<td>
<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">H</td>
</tr>
<tr>
<td colspan="5">D</td>
</tr>
</table>
W3C Validator complains, that: "Table column 6 established by element td has no cells beginning in it." even though cell 'C' should begin on 6th column. It displays correctly, so could it be a bug in the validator?
This appears to be a bug in the validator. It somehow fails to analyze the table properly.
Proving this might require a detailed analysis based on the HTML5 table model, but if you just add <col><col><col><col><col><col> right after the <table ...> tag, the markup passes validation – perhaps because it tells the browser that there are six columns and this helps the validator to recognize the status of the C cell properly. I accidentally noticed this when I added the col elements in order to set background colors on columns to visualize the situation better.
Consider posting a bug report and reporting back here if there will be progress there.

outlook 2013 in-browser inbox is adding style attribute to my table and destroying the alignment

EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

Recreate Table with Divs

I'm trying to recreate a table with divs. I want to be able to put elements between the rows so that when a user clicks on a specific row, a description of the data in the row can appear between the rows.
I need the columns to align even if there are elements between the rows. I also need the "cells" to word wrap or push the boundaries similar to tables. The table that I am trying to recreate is 100% width and the page also has expanding widths. I can make the table be a set width, but I'm supporting several screen sizes so keeping the 100% would be best
Thanks for any help!
EDIT:
Here is what I ended up doing (MVC With Razor):
<table style="width: 100%">
<tr>
<th>
Data1
</th>
<th>
Data2
</th>
<th>
Data3
</th>
<th>
Data4
</th>
<th>
Data5
</th>
<th>
Data6
</th>
</tr>
#foreach (var item in Model)
{
<tr id="#item[0]">
<td>
<span style="padding-left: 5px">+</span> <span style="padding-left: 15px">#item[0]</span>
</td>
<td>
#item[1]
</td>
<td>
#item[2]
</td>
<td>
#item[3]
</td>
<td>
#item[4]
</td>
<td>
#item[5]
</td>
</tr>
<tr id="Expander#item[5]" style="display: none">
<td colspan="6">
</td>
</tr>
}
</table>
Then I just did some jquery to control all of the expanding/contracting
Worked great!
If you have tabular data stick to tables. For what you want to do take a look at the colspan attribute. It enables a table cell to span over multiple columns (even all of them).
For maximum width, set width:100% on the table.
Good luck,
Alin

Outputting something like rowspan with dynamic number of records

Given a table like this:
Col 1 | Col 2
1 2
1 3
2 4
...and could be any number of 1's, 2's, etc. in Col 1. I want to dynamically output something that would look like this:
<table>
<tr>
<td rowspan="2">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td rowspan="1">
2
</td>
<td>
4
</td>
</tr>
</table>
My issue is that, for the above html, I would have to count the number of distinct 1's to find the appropriate rowspan number, then go back and iterate through them for the html output. I was just wondering if there was an easier/quicker way to do something similar where I could just iterate through the records and add something once the next row in Col 1 is different than the last row's Col 1.
I read something that sounded like I could just use rowspan="0" for the first record, and divide the groups up by tbody tags like so:
<table>
<tbody>
<tr>
<td rowspan="0">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="0">
2
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
...and the rowspan="0" would just span the tbody section it is contained in. I haven't been able to find much info on this method, and I couldn't get it to work in IE or Firefox. So is there anything along those lines that would speed up my html rendering? Thanks in advance.
How about trying like this?
<table>
<tbody>
<tr>
<td rowspan="10">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="10">
2
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
At least on this table it looked like it worked in IE8 and FF 3.6. I'm assuming that if rowspan="10" works fine on a table with 3 rows that has 2 sections (2 rows first, 1 row second) then rowspan="10000" should work as well.
Edit: oh yea, according to a couple of sites, the rowspan="0" works correctly so far only in Opera.

HTML Table issue

I have a HTML table issue that I'd like to understand better.
Let's assume that I have a 3 row HTML
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
With a very long text, the contents in the first 2 rows appear like they are nearly centered. However, if I move the whole "A very long string" <td> into a separate <table> inside the row, I see that the other content doesn't center. Why is the display different when the <td> content is inside another table?
If your question ends up with 2 tables, with the original like this:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
</table>
And the looooong text into its own:
<table>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
Then the reason why the first two lines of the first table no longer look like they're centred is because they're not - ONLY if you're comparing relative to the second table.
If you debug with border="1" in your TABLE attributes, you will see that the table that they are contained in collapses to the widest possible table data cell. Because of this, they don't look like they're centred, even though they still are.
Add some arbitrary width to the first table and you will see that they are still centred.
Can you please provide your second example? When I created the following, it still looked the same. There's a chance you didn't properly embed the table within a table cell with a colspan of 2.
<table border="1">
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">
<table border="1"><tr>
<td>A very loooooooong string here</td>
</tr></table>
</td>
</tr>
</table>
When explaining an issue with HTML, it is best to indicate which browsers were used to test...
Anyway, I did a quick test with FF3 and IE6, and I don't see the behavior you describe: with nested table, the long string has slightly more padding but the other content is still visually centered.
You should show your other code. Mine is:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
</tr>
</table>
I think I know what you mean, is the second part of your question based on:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<table><td colspan="2">A very loooooooong string here</td></table>
</tr>
</table>
then I guess the reason the table contents are rendered left-aligned is that the inner table tags are hiding the colspan from the outer table.
The answer is to stop using html to style your table and to use CSS instead!