Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mobile Emails: Making Side-By-Side Tables Match Heights

    So...I tried this at StackOverflow, with no success. I have a feeling it can never be achieved, but I figure I should turn to as many people in this line of work as I can, just in case I'm completely missing something.

    Well, as the title says, this is the basic structure of a mobile-friendly email template. All columns are tables set to certain percentage widths (100%, 50%, 33%, etc). Making everything a table lets the layout become a single column in mobile environments (via media queries). Unfortunately, it also produces a significant issue: columns will never stretch to the same height as the tallest neighbor.

    I was ready to give up on this issue entirely until I managed to actually get it to work--but only in Firefox. My solution there used display: table; to achieve the intended effect, but IE and Chrome ignore it.

    I know finding any help on this is probably a long shot, but if anyone can help guide me or provide a solution, I'd be eternally grateful. The code is below, and is also viewable here: http://jsfiddle.net/EmeraldTwilight/6KJcD/.

    Eternal thanks ahead of time!


    Code:
        <!-- TEMPLATE WRAPPER -->
        <div id="TemplateDiv" style="margin-left: auto; margin-right: auto; max-width: 100%; width: 600px; background-color: transparent; font-family: Tahoma, Geneva, sans-serif;  display: block;vertical-align: top; font-size: 1em; ">
        
        <!-- BEGIN TEMPLATE -->
        <table  class="sp_template" border="0" cellpadding="0" cellspacing="0" align="center"  style="max-width: 100%; width: 600px;  background-color: #bamf00; display: table; vertical-align: top; ">
        <tr>
        <td style="width: auto;  display: block;vertical-align: top;" >
        
        
        <table class="sp_row" border="0" cellpadding="0" cellspacing="0" width="600px" style="width: 600px; vertical-align: top; background-color: #333; height: 100%; " align="left" height="100%">
        <tr>
        <td>
        
        <!-- CONTAINER -->
        <table class="sp_m_container" border="0" cellpadding="0" cellspacing="0" style="width: 50%; background-color: #F00;    vertical-align: top; display: table; height: 100%;" align="left" height="100%">
        <tr>
        <td class="sp_section sp_section_sortable" style="width: 100%; max-width: 600px; border: 0; vertical-align: top; background-color: transparent; -webkit-text-size-adjust: 100%; padding: 6px;"> 
        
        <!-- BLOCK -->	
        <div class="sp_block" style="vertical-align: top;">
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top;">
        <tr>
        
                <!-- CONTENT -->
                <td class="sp_inner_block" style="padding: 6px; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b; -webkit-text-size-adjust: 100%; vertical-align: top;">
        
            <div style="text-align: left; margin: 0px !important; margin-bottom: 1pt !important;">
            <span class="sp_font_paragraph" style="margin-bottom: 1pt !important;font-size: 0.813em;  color: #fff;   ">
                The worst thing about this is that it may not be fixable.</span></div>
        
        <!-- CONTENT CLOSE -->				
        </td>
        <!-- BLOCK CLOSE -->        
        </tr>
        </table>
        </div>
        <!-- CONTAINER CLOSE -->		
        </td>
        </tr>
        </table>
        
        
        <!-- CONTAINER -->
        <table class="sp_m_container" border="0" cellpadding="0" cellspacing="0" style="width: 50%; background-color: #00F;vertical-align: top; display: table; height: 100%; " align="left" height="100%">
        <tr>
        <td class="sp_section sp_section_sortable" style="width: 100%; max-width: 600px; border: 0; vertical-align: top; background-color: transparent; -webkit-text-size-adjust: 100%; padding: 6px;"> 
        
        <!-- BLOCK -->	
        <div class="sp_block">
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
        <tr>
        
                <!-- CONTENT -->
                <td class="sp_inner_block" style="padding: 6px; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b; -webkit-text-size-adjust: 100%;">
        
            <div style="text-align: left; margin: 0px !important; margin-bottom: 1pt !important;">
            <span class="sp_font_paragraph" style="margin-bottom: 1pt !important;font-size: 0.813em;  color: #fff;   ">
                This sentence is here to show the issue I'm facing. When one table is taller than the other, it doesn't stretch down to match its neighbor--except in Firefox.</span></div>
                                                
        
        <!-- CONTENT CLOSED -->				
        </td>
        <!-- BLOCK CLOSED -->        
        </tr>
        </table>
        </div>
        <!-- CONTAINER CLOSED -->		
        </td>
        </tr>
        </table>
        
        </td>
        </tr>
        </table>
        
        
        </td>
        </tr>
        </table>
        </div>

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    1
    Thanked 1 Time in 1 Post
    first, i can tell by the code at a glance you're doing it all wrong

    second, why don't you make a quick image in photoshop of what you want the layout to look like.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webaddict View Post
    first, i can tell by the code at a glance you're doing it all wrong
    In what way? It highly resembles pretty much every mobile template structure I've come across.

    Quote Originally Posted by webaddict View Post
    second, why don't you make a quick image in photoshop of what you want the layout to look like.
    Sure. Top is what it looks like in IE/Chrome, and the bottom is what it looks like in Firefox (and what it's supposed to look like).


  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by Malachite View Post
    In what way? It highly resembles pretty much every mobile template structure I've come across.
    You have tables nested inside tables nested inside tables with a bunch of inline styling. The code is just not pleasant to look at or read, which might explain the lack of help. I'll be honest and say that I just skipped to your second post. Lol.


    Quote Originally Posted by Malachite View Post
    Sure. Top is what it looks like in IE/Chrome, and the bottom is what it looks like in Firefox (and what it's supposed to look like).

    The picture seems to be an extremely easy thing to achieve. I don't see what's wrong with...

    http://jsfiddle.net/5WDpJ/
    Last edited by ttkim; 04-18-2013 at 06:54 PM.
    My signature :)

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    You have tables nested inside tables nested inside tables with a bunch of inline styling. The code is just not pleasant to look at or read, which might explain the lack of help. I'll be honest and say that I just skipped to your second post. Lol.
    I can completely understand it looking ugly and hard to read, but it's just how it goes when you have to do mobile emails. Outlook and Gmail strip out styles if you put them in the head, so this is how you're stuck doing things.

    Quote Originally Posted by ttkim View Post
    The picture seems to be an extremely easy thing to achieve. I don't see what's wrong with...

    http://jsfiddle.net/5WDpJ/
    It's a mobile email thing: when you look at the email on your phone, the email recognizes (via media query) that it's being viewed at a certain resolution, and every column becomes 100% width, forming a single-column layout. It's just impossible with table cells; you have to use tables as if they were cells to achieve the effect.

    Honestly, it looks more and more like this is something that is impossible to achieve universally strictly through HTML/CSS. I deeply appreciate your input, though.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Correct this background-color: #bamf00; to #f00.

    Give your nested-table with class="sp_row" this same red background-color.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •