Different width on Chrome and Firefox on same screen - html

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.

Related

Compatibility issue with IE 11 and JAWS for role="presentation" while trying to read tables?

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 :-)

Indenting Text in HTML Email Template

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>

Table column width stretched

Can someone explain to me why my table isn't laying out the way I would expect?
The column displaying the phone numbers should be as wide as possible, but the cell with the email address is making the column with the number labels wider?
http://jsfiddle.net/NinjaArmadillo/UX3pH/
<table width='100%' border="1">
<tr>
<td rowspan='5'>PIC</td>
<td colspan='2'>First Lastname</td>
</tr>
<tr>
<td colspan='2'>Users Position</td>
</tr>
<tr>
<td colspan='2'>emailaddress.emailaddress#emailaddress.com</td>
</tr>
<tr>
<td><span>business:</span></td>
<td width='100%'><span>123-4567</span></td>
</tr>
<tr>
<td><span>mobile:</span></td>
<td width='100%'><span>765-4321</span></td>
</tr>
</table>
P.S. Please no "You should use DIVs!", I know, this is a small part of a much larger layout and I couldn't get everything to work with DIVs and I'm running out of time, v2.0 will be refactored to use DIVs (If I can get time to make them work)
This will help you td{width:5%}
Demo

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>

Gmail ignoring height in empty <td> cell (HTML Email)

I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients