I am trying to produce a HTML/CSS eBay store template for my friend.
It looks fine on my PC with Chrome and IE but on his Mac and iPhone (both using Safari) the layout isn't displayed as we would like.
On the left column, the menu items should be displayed at the top of the column but on Safari they are displayed at the bottom of the column.
Please does anyone know of a fix for this Safari positioning behaviour?
P.S. The out-dated table tags are automatically added when you upload the template.
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr><td colspan="3" rowspan="1" height="15"><img width="1" height="15" src="http://pics.ebaystatic.com/aw/pics/s.gif"></td></tr>
<tr><td align="left" colspan="1" rowspan="1" valign="top" id="LeftPanel" width="210" height="100%" style="word-wrap:break-word;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4thldr"><tbody><tr>
<td><div><div style="padding:0px 0px 0px 0px;width:100%;float:left;font-size:14pt;color:#FFFFFF">
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none">Title 1</h5></div>
<div style="clear:both;width:100%">
Menu 1 Items
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none;margin-top:20px">Title 2</h5></div>
Menu 2 Items
</div>
</div></div></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4thldr"><tbody><tr><td>
<div><div style="padding:0px 0px 0px 0px;width:100%;float:left;font-size:14pt;margin-top:20px">
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none">Newsletter Signup Title</h5></div>
<div style="clear:both;width:100%">
Newsletter Signup Box Content
<div style="background-color:#CCCCCC;padding-left:5px"><h5 class="icon-title" style="font-size:16pt;padding:0;margin-bottom: 0.5em;text-transform:none;margin-top:20px">Payment Methods Title</h5></div>
Payment Methods Content
</div>
</div></div>
</td></tr></tbody></table></td>
<td colspan="1" rowspan="1" width="13"><img width="13" height="1" src="http://pics.ebaystatic.com/aw/pics/spacer.gif"></td><td colspan="1" rowspan="1" valign="top">
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td colspan="1" rowspan="1">
<table id="TopPromoArea" cellspacing="0" cellpadding="0" border="0" width="100%"></table>
</td></tr><tr><td align="left" colspan="1" rowspan="1" valign="top" id="CentralArea">
<div style="width:100%;background-color:#FFFFFF;padding:20px 20px 20px 20px;float:left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="v4stw">
// Long list of items here
</table>
</div></td></tr></tbody></table>
<br clear="none">
</td>
</tr></tbody></table>
I found the issue was due to reset.css declaring "vertical-align:bottom" which only seemed to affect Safari. I have now removed this line and is working fine now.
Related
hello longtime lurker first time asker - im having an issue with outlook 14 on iOS. I send a test send and it begins to render the mobile view as it should look then it gets to a point and sizes everything down as if its desktop. coupla code blocks for reference:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" height="auto" style="background-size:cover;height:auto; background-position:center;" valign="middle">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- IMAGES AND TEXT SIT WITHIN THIS AREA -->
<tr>
<td align="center" class="hide" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="600"></td><!--[if !mso 9]><!--><td align="center" valign="top">
<div class="mobile_show" style="display:none;width:0;overflow:hidden;max-height:0!important">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" width="100%">
<tr>
<td align="center" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" height="auto" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_mobile_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="100%"></td></tr></table></div></td><!--<![endif]--></tr><!-- IMAGES AND TEXT SIT WITHIN THIS AREA --></table></td></tr></table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td></tr></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width: 600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 30px;" width="30">
</td><td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="intro_width_mobile">
<tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr><tr>
<td align="center" class="black" style="color:#000000; font-family:'Custom Font 1','Helvetica Neue',Helvetica, Arial, sans-serif; font-size:16px; line-height:21px; width:100%; max-width:464px; margin:0 auto; Margin:0 auto" valign="top" width="100%">
There's more where that came from, so stop by again soon.<br>
<br>
Burg apetit!<br>
</td></tr><tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr></table></td><td style="width:30px;" width="30">
</td></tr></table></td></tr></table>
TIA for your help
Outlook apps try and 'fix' your large images by adding a max-width:100% to their CSS. But if you use e.g. max-width:600px as you are, it will be overridden. You can overwrite this by using max-width:600px!important inline (or an id on your body, e.g. #body .myimage {max-width:600px!important}).
Alternatively, you could rely on width:100%, which you don't have on your first image.
That's probably the trigger (big images or tables which it can't resize properly). Let us know if that doesn't solve it.
So below is this table. It essentially creates a grid of images that goes into an email. because it is an email I need the styling to be in-line. The grid looks great on a desktop but when viewed on a mobile device each table aligns to the left leaving a white space to the right. however, if I change the align tag, the grid no longer works on desktop.
Is there a way with in-line stylings to either get the content to align to the center when viewed on mobile only Or at least get the table to fill the container when viewed on a smaller screen?
<tbody>
<tr>
<td>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
</tbody>
</table>```
I do not know if the table is so important to use ,
but you can do this by simply put the images in for example and the div style will be:
{
display: flex;
flex-direction: column;
align-items: center;
width: '100[%,vw]'; // may not necessary
}
css flex is so important for responsive design.
if not, put your table within div and give the style to the div
mobile device size (width) is generaly <= 768px (without resolution)
I appear to be getting a 1px white box around my tables in outlook 2007,10 and 13. Ive done border collapse and it hasn't fixed the issue? Want three 200px tables aligned horizontally, but because a 1px border is being applied it thinks they're more than 200px, therefore breaking the alignment. Tried everything so any suggestions appreciated.
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" width="600" bgcolor="#B6B6B6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#EE070B" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>1</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#1527EA" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>2</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#ED7407" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>3</td></tr>
</table>
</td>
</tr>
</table>
Outlook adds around 20px around Tables, no matter what. Not sure on the 1px border but try this hack to fool all Outlook versions into thinking your Tables are Table cells: http://labs.actionrocket.co/make_mobile_email_work_in_outlook
We have run into a problem with emails accessed through gmail using browsers on iOS only recently. We have a call to action button that we would like to center on the email. We have previously been able to do this using a table within a table and an align=center, but now it just doesn't work.Here's an example of the code I'm talking about:
<table width="551" height="51" border="1" cellpadding="0" cellspacing="0" class="mobile- content-size" style="min-width:551px;">
<tr>
<td height="51" style="text-align:center;" class="cta-one-row">
<!-- start button -->
<table border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="cta-show-them-table" style="color:#6a797b; text-decoration:none; background-color:#3b3b3b; border-radius:3px; width:230px;" height="50">
<tr>
<td align="center" valign="middle" height="50" style="color:#FFFFFF;" class="cta-show-them">CALL TO ACTION
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
Here's a link of what it looks like rendered on emailonacid.
Has anyone else run into this sort of problem or have a fix? It's rather important that these buttons are centered!Thanks!
I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It's an old HTML site I maintain but didn't write (it should be rewritten in CSS) but the owner doesn't want to do it yet and it's a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I've stared at this and I know I'm missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I'm sorry for the code. It's a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I'm stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have "problem starts here":
<td colspan="3" width="100%" height="1" align="left" valign="middle"> </td>
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.