StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POResponsive email table keeps breaking - what is causing this?
primarykey
Id
16171544
data
AcceptedAnswerId
16299375
AnswerCount
4
ClosedDate
CommentCount
17
CommunityOwnedDate
CreationDate
2013-04-23T14:08:51.560
FavoriteCount
1
LastActivityDate
2013-05-01T17:25:44.020
LastEditDate
2013-04-24T16:11:21.270
LastEditorUserId
508248
OwnerUserId
508248
ParentId
0
PostTypeId
1
Score
4
ViewCount
1322
LastEditorDisplayName
text
Body
I'm working on an HTML Email which is working perfectly in the multiple email client/browser combinations I need to support save for this one problem which I just cannot figure out. I have a table that is <code>600px</code> (which is the width of the email) wide and within this there is another table which is comprised of a top and bottom 'curve' image which has some text in the middle. As this email is responsive, when the browser window is made smaller the inner grey table just 'breaks'. I know this because I am using Litmus to test across a multitude of browser/email clients combinations. Note: this ONLY happens when email is "resized" i.e. only on mobile email clients. If you look at the below fiddle, the portion I am talking about is the inner grey box that begins <code>The Victims of Fraud...</code>. This box (when resized) just will not play nice. I have tried everything I can think of, using padding, removing padding, nested tables and everything inbetween. It's driving me crazy. In order to see what I mean open the fiddle then make the <code>HTML</code> window smaller. Here is a fiddle to try and illustrate what I mean: <a href="http://jsfiddle.net/39gzj/2/" rel="nofollow">http://jsfiddle.net/39gzj/2/</a> UPDATE: If you look using Firebug / Chrome Developer Settings, you will see that for some reason the table has this magic <code>2px</code> added to the inner grey table. This is what I need to eradicate! UPDATE 2: Tried again with what was posted in the comments but again this does not work. <a href="http://jsfiddle.net/39gzj/2/" rel="nofollow">http://jsfiddle.net/39gzj/2/</a> UPDATE 3 - I've even tried using a media query to explicitly resize this middle box but it still doesn't work. Here is the updated fiddle; <a href="http://jsfiddle.net/39gzj/5/" rel="nofollow">http://jsfiddle.net/39gzj/5/</a>
Tags
<html><css><html-email>
Title
Responsive email table keeps breaking - what is causing this?
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USzik
UserOwnerUserId
1. USzik
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POResponsive email table keeps breaking - what is causing this?
 UserUserId
 USzik
 VoteTypeVoteTypeId
 VTBountyStart
2. VO
 singulars
 PostPostId
 POResponsive email table keeps breaking - what is causing this?
 UserUserId
 USBigood
 VoteTypeVoteTypeId
 VTFavorite
3. VO
 singulars
 PostPostId
 POResponsive email table keeps breaking - what is causing this?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.