Styles failing in Outlook 2007 and up?

[lspoor]

How can we reproduce this bug? Use the following code:

HTML (inky)

<row>
	<columns>
		<wrapper class="villa" bgcolor="#e6edf2">
			<img src="assets/img/villa.jpg" alt="">

			<row>
				<columns large="6" no-expander>
					<h1>Agios Nikolaos</h1>
					<h2>Almyrida, Crete</h2>
				</columns>
				<columns large="6" no-expander>
					<img src="assets/img/villa-icons.jpg" alt="" class="float-right">
				</columns>
			</row>

			<hr>

			<p>Agios Nikolaos is located in a truly magnificent spot, positioned on the hillside<br class="show-for-large"> just above the popular seaside village of Almyrida.</p>

			<row>
				<columns large="9">
					<h3>7 Nights from only</h3>
					<h4>£804 <span>pw</span></h4>
				</columns>
				<columns large="3">
					<button class="view expand" href="#">View Now ></button>
				</columns>
			</row>
		</wrapper>
	</columns>
</row>

CSS

.villa {
	background:#e6edf2;

	.container {
		background:#e6edf2;
	}

	h1 {
		text-transform:uppercase;
		font-family:'Open Sans';
		font-weight:700;
		font-size:19px;
		color:#25346b;
	}

	h2 {
		font-family:'Open Sans';
		font-weight:400;
		font-size:17px;
		color:#25346b;
	}

	h3 {
		font-family:'Open Sans';
		font-weight:400;
		font-size:14px;
		color:#25346b;
	}

	h4 {
		font-family:'Open Sans';
		font-weight:700;
		font-size:20px;
		color:#25346b;

		span {
			font-weight:400;
			font-size:14px;
		}
	}

	img.float-right {
	  	float:right;
	  	text-align:right;

	  	@media only screen and (max-width: #{$global-breakpoint}) {
	  		float:left !important;
	  		text-align:left !important;
	  	}
	}

	p {
		font-family:'Open Sans';
		font-weight:400;
		font-size:12px;
		color:#25346b;
	}

	table.button.view table td {
	  	background:#ea047f !important;
	  	border-color:#ea047f;

	  	a {
	  		text-transform:uppercase;
	  		font-family:'Open Sans';
	  		font-weight:400;
	  		color:white;
	  	}
	}
}

And run foundation build to create the files

Write out the HTML (or Inky code) that causes the issue. As above

What did you expect to happen? The image to be aligned right and the button to have a background

What happened instead? The image sat to the left and the button lost its background

What email clients does this happen in? Outlook 2007, 2010, 2013

Weirdly, 2000 and 2003 work absolutely fine. Note, I also had to add the image float-right code into my own styles as it wasn't being carried over from the framework styles for some reason..have attached some issues of the email working and not working

[callaginn]

@lspoor Did you ever figure out the issue with the button background not showing up? I believe I'm seeing the same issue in Outlook 2007, 2010, 2013, 2016, and Windows 10 Mail:

[lspoor]

Hey @callaginn I haven't been on this since posting this I'm afraid.

[damienalexandre]

I have the same issue. Managed to make a background appear by cheating, and the final result is far from ok, I will pursue my tests.

    <center>
        <table bgcolor="#e4002b" style="background:#e4002b; width: auto;">
            <tr>
                <td>
                    <button class="alert" href="#">DO STUFF</button>
                </td>
            </tr>
        </table>
    </center>

[DanielRuf]

The button element creates a table. The styles seem to work so this is not the same issue.

[DanielRuf]

In general buttons should be configured through the settings file.

There might be the hover or other styles that cause this.