Foundation-emails: Vertical menus don't work in some clients

[gakimball]

Litmus test. In these clients, menus with the class .vertical appear horizontal instead:

• Outlook (2000, 2002, 2003, 2007, 2010, 2013)
• AOL Mail
• Office 365
• Outlook.com

[kball]

So... outlook does not respect display:block, which is the trick being used for this... from what I can see, the way to get vertical alignment is actually a structural change using tables for menu elements rather than just tds, so this change is going to need to happen in inky, and for the html version we'll need to document the difference.

[kball]

Fixed with https://github.com/zurb/inky/commit/8b040fe1221f9003c27d3025549504e6ff8f0c8f and https://github.com/zurb/foundation-emails/commit/f81aa6b789a3a72e4fc88dcc24e750690de29360

[michaelworm]

Well as I can see this issue has not been fixed? The vertical menu still doesn't work in Outlook (at least in 2013 version in which I was testing) because of display: block used to make the <th>s align vertical instead of side-by-side.

Please see the screenshots from Apple Mail 9 and Outlook 2013:

My Inky markup:

<menu class="vertical content-block-bg categories">
    <th class="menu-item headline">
        <h1>Diese und weitere Meldungen im Newsletter</h1>
    </th>
    <item href="#news">
        News: <span>Biconex erhält Finanzierung der Ceterum-Holding</span>
    </item>
    <th class="menu-item border" height="1px" style="font-size:1px;line-height:1px;">&nbsp;</th>
    <item href="#produkte">
        Produkte: <span>Faktor Urheberrecht: komplex oder einfach zu lösen?</span>
    </item>
    <th class="menu-item border" height="1px" style="font-size:1px;line-height:1px;">&nbsp;</th>
    <item href="#applikationen">
        Applikationen: <span>GLP: Wie normkonforme Prüfung hilft, Arzneimittelskandale zu verhindern</span>
    </item>
    <th class="menu-item border" height="1px" style="font-size:1px;line-height:1px;">&nbsp;</th>
    <item href="#events">
        Events: <span>SLAS 2016</span>
    </item>
</menu>

The output markup:

<table class="menu vertical content-block-bg categories"><tr><td><table><tr>
    <th class="menu-item headline float-center">
        <h1>Diese und weitere Meldungen im Newsletter</h1>
    </th>
    <th class="menu-item float-center"><a href="#news">
        News: <span>Biconex erh&#xE4;lt Finanzierung der Ceterum-Holding</span>
    </a></th>
    <th class="menu-item border float-center" height="1px" style="font-size:1px;line-height:1px;">&#xA0;</th>
    <th class="menu-item float-center"><a href="#produkte">
        Produkte: <span>Faktor Urheberrecht: komplex oder einfach zu l&#xF6;sen?</span>
    </a></th>
    <th class="menu-item border float-center" height="1px" style="font-size:1px;line-height:1px;">&#xA0;</th>
    <th class="menu-item float-center"><a href="#applikationen">
        Applikationen: <span>GLP: Wie normkonforme Pr&#xFC;fung hilft, Arzneimittelskandale zu verhindern</span>
    </a></th>
    <th class="menu-item border float-center" height="1px" style="font-size:1px;line-height:1px;">&#xA0;</th>
    <th class="menu-item float-center"><a href="#events">
        Events: <span>SLAS 2016</span>
    </a></th>
</tr></table></td></tr></table>

What I found out now:
If you wrap each <th class="menu-item float-center"> ... </th> with a <tr> it seems to work just fine in Outlook 2013.

[pzontrop]

I was checking out the commits of @kball above and it does seem like that should fix it. It tries to wrap each line in a full table even (not just a tr). So I wonder why in version 1.3.6 i don't see these tables in my compiled sources.

[pashkes]

help me. What am I doing wrong,

[nikitasol]

help me. What am I doing wrong,

What exactly is your issue Pavel?

[pashkes]

help me. What am I doing wrong,

What exactly is your issue Pavel?
The problem still remains. The menu on the one row in Outlook last version