ML7
Yahoo change?
Just noticed Yahoo seems to have done an update and most emails are no longer aligned? Tables have align="center" on which originally fixed it for office 365 a few months back however as of the past few days Yahoo is no longer centering items?
Anyone picked up on this?
Just had a quick look at this and adding
table-layout: fixed;to your outer table should fix it.Not fully tested this yet, just had a quick mess about in my lunch break.
Nice! This is working for me in Yahoo. Testing in other clients now to make sure it's not doing anything funky.
EDIT - Nice work Mark, seems to be working across everything.
Panic over guys!
Cheers for testing that.
table-layout: fixed;is also good for rendering performance, as discussed hereAwesome work - Thanks!
Seem's to work perfectly... Thank you.
So now it looks like it's ignoring
align="center"not sure what's causing this yetalign="left"andalign="right"seem to be working fine.Anyway it can be fixed with a simple
margin:0 auto;so my templates now look like this...table {border-collapse: collapse;
table-layout: fixed;
margin:0 auto;
}
Cheers
Just come across a couple of issues with this with nested tables. So I only want to apply this the the main 100% wide table and the 600px table held within that.
So my updated code looks like this
Seems this issue is now back. Any update on code to resolve it?
Also had a look at this and tried the answers below, but none of them seems to be working for me atm. In my case I have a fluid email which has a 100% width. What worked eventually was adding this between the <style> tags:
.msg-body
{width: 100% !important;}
This forces the email to take of the full width.
table-layout: fixed (by Mark Robbins ?) seems to do the trick if it is defined inline on the wrapper table:
...
<body>
<table class="wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed;"
...
Perfect. I brainstormed this for a while when I first started noticing the issue ... this solution works.
Looks to me like Yahoo has changed again and emails are centered again? I haven't been using the table-layout fixed, and now all emails are centered in Yahoo. Anyone else seeing this?
Do my eyes deceive me?!
I was just testing an email and happened to see my emails looking groovy in Yahoo again.
Came on here to spread the word, but you beat me to the punch.
Although I didn't notice it last week while testing.... It was a looong week though lol.
I haven't bothered with any fixes because of the issues that appear in other clients because of them, but it's nice to see Yahoo aren't just pulling css support, they're also adding it.
I've noticed that valign is broken when viewed in Safari - it defaults to valign="top".
Fix: combine "vertical-align:middle" in your <td> style with valign="middle"
<td valign="middle" style="vertical-align:middle;">
Looks like there might have been another Yahoo update? We just noticed that all of our emails that weren't centering are now fine.
Hi Mark,
I'm also seeing this. It looks like Yahoo isn't respecting
width="100%"for some reason.I am going to investigate further, good spot!
Upon further investigation, when you set
width="200%"it expands out too big. Sowidth="100%"is not stretching to take up the space, obviously we can't havewidth="200%"though!Hey; It seems to have resolved it's self. I'm assuming Yahoo! have pushed an update of some kind that broke whilst propagating across their servers - All previous emails are now working...
Veryyyy Strange indeed! Thanks for the suggestion though!
Man, I'm glad that's fixed. I was freaking out a bit!
Afraid to say I was a little quick to assume - Broken again - Assuming I had a cached stylesheet somewhere -
The issue seems to be a <div> around the email it's self with a class "body" that is display: table; width: auto; Make that block or 100% in inspector, Working email - However you can't overwrite it as it renames your classes etc in the email.
I did a test and saw it too. I've added
.body {
width: 100% !important;
}
to the css in the head and the e-mail was in the center again.
It has effect on the yahoo div for displaying e-mails.
got this from our service provider... "redeye"
Just wanted to let you know of a widespread issue we're picking up on for Yahoo.
A number of businesses and agencies are seeing almost zero deliveries for Yahoo over the weekend. Though this does not seem to have had an impact on yourselves as of yet, I wanted to make you aware so we can take preventative steps.
Everyone is of course requesting information from Yahoo as to why this is suddenly happening, but the thinking here is that it may have something to do with them changing their interface last week.
We will of course keep you posted on their response but in the meantime, we will need to remove any Yahoo addresses from sends as if we continue to send to them during this issue, if delivery fails they will be fed back to us as bounces and eventually be blacklisted (as part of our three-strike rule).
The easiest way to do this will be using field logic within REACT/Contour. On step 4 of the process (Pick Recipients), you’ll see this box.
<image001.jpg>
In order to remove Yahoo users, all you need to do is copy the below into this box before you calculate. Please note that there should be no spaces at the end of the text, just to check J
[[email]] NOT LIKE ~%yahoo.co.uk~ AND [[email]] NOT LIKE ~%yahoo.com~ AND [[email]] NOT LIKE ~%ymail.com~
Once the count comes back, as a final check you’ll be able to see the lower count in the breakdown on step 7 of the process.
Has anyone else noticed adding table-layout:fixed has a negative effect on emails in Android (4.4) Mail? With it included, the background colour doesn't wrap around the email on initial load (does if you zoom out), whereas this doesn't happen when it's not included.
From my experience, the contents of most html emails is picked up from <center> tag or the very first <table> tag. I have similar background color issue with hotmail (web) and applying a background color to either or both tags should fix it.
Can you test and confirm?
I am using a 100% wrapper table right after the body tag, both with the background colour, and I have applied the table-layout fix from this thread onto the wrapper table. It's not that the background colour isn't working, its the table-layout fix. When I remove it, there is no problem in Android mail - scrolling to the right I can see the background fills the entire space. When it is added, I don't even have to scroll right to see that the background colour is cut off before even reaching the right edge of the email.
Alright.
Can you create a new wrapper table which will be a new parent table with background color. Then the old table will be the container with the with and proper center alignment - that way, the parent table background color should be visible.
I hope my idea makes sense ;)
The current table will be inner and needs to have width like 600 or something see my edit from previous post.
See my template here: https://github.com/charlesmudy/Respmail
Maybe the structure might help.
This has worked for me, but it's annoying to have to nest again.
I have the main 600px table inside of that.
Well ... email design in general is annoying but the main thing is to find a working solution - so if it works, then bravo!!!
Very true! Thanks for your help!
Yes
I have a working fix in my 100% table that goes just below the body, this center aligns everything again. if you add this style into your 100% table , it should do the trick:
style="table-layout: fixed;"
I've run into another issue with table-layout:fixed - when I make the browser window smaller, in Gmail the right side of the email gets "covered" with white. This means users with a smaller screen may not see the right side of your email! Without table-layout added, it's not covered and there is a horizontal scrollbar.
Has anyone else come across this?
I've just had a quick look and can't recreate this, what browser are you viewing in?
Chrome, and taking a look it is also happening in Safari and Firefox. There actually is a horizontal scrollbar eventually, but the white is the problem. Scrolling right, it's just white.
It could be the way the email is set up, but using Chrome's inspector to remove everything in the email body and leaving just a couple lines of copy at the top, doesn't fix it. When I toggle the table-layout on and off, that's when I can see disabling it fixes the problem.
Edit: If anyone's interested I put together a super simple test that has the problem occurring. I can't figure out anything other than table-layout to override Yahoo's display:table on the .body that's preventing the 100% width wrapper(s), but then it has the negative effect in Gmail...
Interesting...
I've had a little play around and not quite worked it out but I do have a solution.
Firstly I took the inline style out and added it to a style block in the head but that didn't work, gmail still recognised the style, then I stuck a media query in and gmail ignored all the styles. I'm gonna play around with this a little more.
But for now, the code below works
Hey Mark,
That works fine for Gmail, but it's not fixing the Yahoo bug. I don't understand how the media query would help exactly - sure, Gmail ignores it, but Yahoo also appears to be, so table-layout doesn't get applied. Even using a class
table.wrapperdoesn't get the CSS to apply in Yahoo.Hey Mark,
Thanks for this, but unfortunately I copied and pasted your code and it doesn't work for me. You can see how the copy is being cut off in Gmail in the screenshot below, compared to how it should be when table-layout it toggled off. Also, it's not centered in Yahoo at all this way for me.
Cut off:
http://clients.bstro.com/courtney/gmail-cut-off.png
Not cut off:
http://clients.bstro.com/courtney/gmail-no-cutoff.png
Oh yeah I forgot to add the
margin: 0 auto;to fix centering in yahoo.The code works fine for me not too sure what's going wrong... Is your ESP automatically inlining the CSS? If so, see if you can turn that off and send the code as it is.
If that doesn't work try using this in the CSS
I'm hoping gmail won't recognise that media query. If it does then maybe try this;
@media screen and (min-width: 600px) {
table {
table-layout: fixed;
Margin:0 auto;
}
I have multiple nested tables and the fix works, but it becomes tedious trying to update all my templates.
Also you have to set every td to align left if you don't want your text or images aligned centered.
So instead , I wrap the table that I want to align centered in a div. See example below :
<div align="center">
<table>
<tr>
<td align="center" style="text-align:left">DATA HERE</td>
</tr>
</table>
</div>