4 Replies - 567 Views - Last Post: 16 April 2013 - 05:35 PM

#1 Malachite  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 16-April 13

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

Posted 16 April 2013 - 01:53 PM

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/...wilight/6KJcD/.

Eternal thanks ahead of time!

    <!-- 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>


Is This A Good Question/Topic? 0
  • +

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

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,589
  • Joined: 12-December 12

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

Posted 16 April 2013 - 03:19 PM

Ensure that your HTML page is correctly formed - the HTML validator is linked in my signature. In particular, ensure that you have a valid DOCTYPE declaration (every page should have). Without this IE, in particular, will drop into quirks mode.

display: table; and similar are CSS3 properties. However, must current browsers support them. But it is intended to make DIVs, etc., behave as tables; it is redundant to apply it to a table.

There is no height attribute for a table (or table elements), and use of border, cellpadding, etc., is deprecated. Use CSS for these, particularly as you want to use other CSS3 properties (display: table).

BTW It is also recommended that you use a stylesheet, rather than inline styles.

If your page is valid, and uses modern css-techniques, then you are more likely to achieve the behaviour that you seek.

Added: Table elements don't have an align attribute either, and the following line is incorrect:

background-color: #bamf00;


Ugh, nested tables as well?! :helpsmilie:
Was This Post Helpful? 0
  • +
  • -

#3 Malachite  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 16-April 13

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

Posted 16 April 2013 - 04:07 PM

Hey there! :) I really appreciate you taking the time to help me on this.

Just for clarification: this code is for mobile email templates. This makes me a slave to many, many masters: Chrome, IE (6, 7, 8, 9, & 10), Firefox, Safari, Yahoo, Gmail, Outlook.com, aol.com, Outlook, Thunderbird, Mobile Safari, the Android Browser, Mobile Chrome, et cetera ad nauseum. That's why I'm using tables and tags that are no longer recognized by more modern renderers: I have to cater to the lowest common denominator, which is Outlook.

View Postandrewsw, on 16 April 2013 - 03:19 PM, said:

Ensure that your HTML page is correctly formed - the HTML validator is linked in my signature. In particular, ensure that you have a valid DOCTYPE declaration (every page should have). Without this IE, in particular, will drop into quirks mode.


Hrm, good point. I've updated the JSFiddle for review: http://jsfiddle.net/...Twilight/6KJcD/

View Postandrewsw, on 16 April 2013 - 03:19 PM, said:

display: table; and similar are CSS3 properties. However, must current browsers support them. But it is intended to make DIVs, etc., behave as tables; it is redundant to apply it to a table.


Huh. Much to my surprise, removing it didn't break things. (There's been a lot of trial and error going on here, my apologies). It's the height: 100%; that's making it work in Firefox. Hrrrrrrrrrm.

View Postandrewsw, on 16 April 2013 - 03:19 PM, said:

There is no height attribute for a table (or table elements), and use of border, cellpadding, etc., is deprecated. Use CSS for these, particularly as you want to use other CSS3 properties (display: table).


Ack, you're right about height on tables, but table cells can have it. I've moved the height tag to the <td> levels to see if it makes a difference. I'm really throwing it all against the wall right now.

[quote name='andrewsw' date='16 April 2013 - 03:19 PM' timestamp='1366150742' post='1837326']
BTW It is also recommended that you use a stylesheet, rather than inline styles.[/quotes]

Outlook hates stylesheets, and if I remember correctly, so does Gmail. :( So I'm stuck with inline.

View Postandrewsw, on 16 April 2013 - 03:19 PM, said:

Added: Table elements don't have an align attribute either.


Bloody Outlook. And align="left" is necessary for all the tables to align horizontally. Try taking it out and watch the right-hand one pop under its neighbor.

View Postandrewsw, on 16 April 2013 - 03:19 PM, said:

Ugh, nested tables as well?! :helpsmilie:/>


Outlook. It only recognizes borders and background colors on <td>s, it seems, so I have to nest the hell out of them to achieve what we need. :(
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,589
  • Joined: 12-December 12

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

Posted 16 April 2013 - 04:34 PM

height: 100% should only work if all descendant elements also have a height setting, all the way back to body and html (if using percentages exclusively), or if the (first) parent element has a specified (non-percentage) height.

This post has been edited by andrewsw: 16 April 2013 - 04:35 PM

Was This Post Helpful? 0
  • +
  • -

#5 Malachite  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 16-April 13

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

Posted 16 April 2013 - 05:35 PM

View Postandrewsw, on 16 April 2013 - 04:34 PM, said:

height: 100% should only work if all descendant elements also have a height setting, all the way back to body and html (if using percentages exclusively), or if the (first) parent element has a specified (non-percentage) height.


Yeah, and sadly I've only seen it inherit only when you go as high as body/html, which, of course, makes everything the height of the entire screen. :(
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1