Hotmail appears to be the only client which produces an unwanted gap in-between two tables carrying images. They should be nested directly against each other. The 'display:block;' (within the img tag) is not the solution because I have multiple cells and images next to each other (in that header section with the logo).
The extra vertical space seems to appear in the tr, td, or table tags in the header section. In Hotmail it creates a 92px height, in everyother browser its 89px (same height as the images).
(I cant post images yet - not enough rep.)
The code via jsFiddle.
I've tried playing with line-height and margin. I can't seem to get any adjustments to respond in Hotmail. Any leads? (I've read all the other html email gap questions)
Try setting cellspacing and cellpadding to "0".
Since it's Hotmail you'll probably be able to troubleshoot the e-mail through your browser's code inspector (Chrome Inspector and/or Firebug). Try to find what elements are causing the gaps.
It's not such a good idea to use margin in an e-mail since this can cause a lot of compatibility issues. How is this e-mail behaving in Outlook 2007/2010/2013?
Related
I am VERY new at dreamweaver, and I am making an email to be sent to clients.
However, I am experiencing a lot of odd things like giant spaces in the td where the image is located:
I don't even know how to describe what it is that it is doing. I hope someone understands what I am talking about and can help me and give me pointers.
I have tried to edit the colspan number and that just moves everything to the right of it:
HTML emails are a bad place to start with coding HTML as email clients render the HTML very differently. I'd recommend starting with a free template from Campaign Monitor or somewhere and editing it as required. That way you'll see what work-arounds they've used and can replicate them in the future.
In my email I have a html table. Table width is set to 900px.
I need to support initial text format set by user (only line breaks). So after a lot of tests I found out that for Outlook 2007 the best solution was tag <Pre>. I wrap text with this tag. But the problem is that some lines are very long and don't have breaks. In this case all email clients automatically breaks lines so table width is not changed. But Outlook 2000-2003 displays this lines without wrapping them. So the table width is increasing.
How this can be fixed? If I remove <pre>
tag everything is ok, long lines are autowrapped, table width is 900px but in this case I loose user text format (line breaks set by user).
In my opinion, the width of your email should not be larger than 600px. I recommend looking into using a framework or boilerplate template. This will make your life a hell of a lot easier. I personally like Zurb's Ink framework, but certainly there are others out there that will work just as well.
Good luck.
I've been checking into some issues with Facebook Like Box plugins on websites my company manages, and have seen different behavior in the past two days. Can anyone help to explain if this is more likely an issue with Facebook, or the target profile/page settings?
I'll focus on the more obvious one here.
When the 'Show Faces' option is disabled and no Data-height is explicitly specified for the plugin, the area to display the Stream activities is reduced to 0 and all that is displayed is a double horizontal line.
Working from the Developers.facebook demo page
(https://developers.facebook.com/docs/reference/plugins/like-box/)
1) Enter a valid facebook Page for the address
-- Defaults should display with width=292, height blank, and all other options checked.
2) un-check 'Show Faces'
-- Like Box shrinks to only display Header, and the Social Plugin footer.
3) Enter a Height value ( anything above 150 px should display some area of content and the vertical slider again, but with the Like Box total height restricted to the height entered)
(I wanted to post this to Facebook as a Bug report, but could not find the correct steps to do so.)
Facebook must have changed something. This only seems to be affecting the HTML5 implementation of this plugin. Some other sites which I maintain, which use the iframe implementation, do not seem to be affected.
I just added a fixed 'data-height' attribute to the 'fb-like'box' div of the HTML5 implementation of the plugin - seems to have done the job.
Looks like they have changed (or broke) the default value for height from "300px" (I think that is what it was) and replaced it with the 120px which leaves no room for the stream. If you add faces it ups the default value and leaves room for the stream.
If you change the height of the box to say 600px (depends on what you want) then even with faces off it will show the stream.
For example if you goto: https://developers.facebook.com/docs/reference/plugins/like-box/
Then turn stream on and faces off (even on the default site of FB Dev) it will still hide the stream with no height specified. Then change the height to say 600px the stream will appear.
Feels like less of a bodge than the other method that Nathan mentioned (which I couldn't get to work anyway! :( LOL)
Hope this helps someone else. :)
I am working on multiple emails for a client who is using Outlook 2010 version 14 for a PC in their office. No matter how the email is created the right side of the table is blown way out.
For example:
Email #1:
Email #2:
This is the code: view-source:http://fortworth.dmplocal.com/main/index.php?action=viewsenthtml&id=95&ids=e9499cb22fd2fbaee560c877a2716fa0aab6880d
I have done a lot of searching to try and figure out what I could do to fix this, below are some things:
Took all CSS inline
Made sure all cell padding, cell spacing, and borders were set to zero
Specified width for tables
Specified height and width for images
Made sure images were the height and width that is specified in the code
Made images jpg's versus png's
Removed all unnecessary white space
My table is not more than 23.7 inches in height
I have read a lot of forums and found that a lot of people have problems with Outlook as well, but I have not found one that has the big space to the right of the table thus pushing it out that mine has.
Any help would be greatly appreciated!
For HTML tables, specify the width and height using HTML attributes rather than CSS styles. Modern versions of Outlook ignore width and height styles.
As #MarcB mentioned, Outlook 2007/2010/2013 uses the rendering engine of Word to render emails. Previous versions of Outlook used the rendering engine of IE. This shift caused significant changes to the landscape of HTML emails.
Below is a partial list of features not supported by Outlook 2007 and up:
CSS styles
float
position
display
width
height
padding (doesn't work on div and p tags)
background-image (only works on the body tag)
list-style-image
HTML attributes
alt (img)
background (table, th, td)
colspan, rowspan (th, td) (there's conflicting info on this, but it does appear to be supported, as long as a value of 0 is not used; however, it's often recommended to nest tables instead of using colspan and rowspan)
Miscellaneous
Animated GIFs
HTML forms
Try placing /> to close the image tag. This alone worked for me. This is a problem wholly invented by MS. As if it wasn't bad enough before.
#MattCoughlin's answer is right insofar as Outlook code. However, I would also add that Outlook is really specific about column and row counts.
Therefore, check that the number of columns add up. Use empty cells and colspans where necessary.
I just did some edits to your code and put up a fiddle for you to test.
http://jsfiddle.net/YWnzc/135/
But I could't check what I have done in my outlook 2010, but I think there are a lot of limitations in outlook 2010
http://fixoutlook.org/
Let me know how it goes.
further I also see that you have tables nested in your code. I dont hink this is necessary. seeing your mailer design this should be a pretty similar and the pronlem you are reporting should not be there, if it was properly coded.
As for me outlook ignored width of div, so if you code it like:
<div style="width:500px">
<table width="100%">
...
</table>
</div>
the width of table would be expanded to 100%, so try nesting all of fixed width elements inside tables and set fixed with to these parent tables (note that table also needs style), like:
<table width="500px" style="width:500px">
<div style="width:500px">
...
</div>
</table>
this will give you the width needed
I'm developing a Vista/Win7 Desktop Gadget that uses a translucent g:background (doc) area with g:text (doc) on top. I'm adding the text via addTextObject (doc), and this all works as expected.
However, I can't figure out how to set that text to bold style. There doesn't seem to be a way to do this directly via the exposed properties that I can see, and I can't use regular text + CSS in this case due to the fact this text is placed onto a g:background object.
I have also tried specifying a bold font directly, such as Arial Bold (doesn't work) instead of Arial (works).
So how can this be done?
Edit: I have tried setting font-weight:bold for both the body and the g:background object that parents my text; no luck.
See Flip Calendar, by Jonathan Abbott. His code is usually well commented so maybe you can get some ideas from that.
EDIT
The source of my information was from the early days of Vista Beta 2 where that was the official word from MS. I also found the following response to a thread on the MSDN forums regarding the Flip Calendar gadget itself:
http://social.msdn.microsoft.com/Forums/en-US/sidebargadfetdevelopment/thread/841e9d5e-32e9-453f-bd0e-dc5a4e607c33/
The gadget has options for setting bold font on the day of the month (a g:text object) but on closer inspection it doesn't work. Sorry about that. The MS guys have been known to be wrong as well on one or more occasions. I can honestly say that I don't use the g:text object.
This means your only (well, non activex route) option is VML text, which provides a lot of flexibility on layout. However, you will have to place it on a fully opaque area of the gadget which is probably why you wanted to use the addTextObject in the first place. Gary Beene's site really helped me out when I was getting started, but it doesn't go into any detail on the v:textbox element and the v:textpath element, though the MSDN documentation goes into enough detail on these.
If you need to place the text on a non-fully opaque area of the gadget, then you could still go the VML route and place an image behind the text that acts as a shadow, starting out fully opaque and fading to fully transparent. This is how Microsoft does text in window title bars with aero enabled.
Alternatively, you could create an ActiveXObject that draws the text you need in the font you want and saves the image to a temporary file in the gadget folder. Then you set that to the src of an addImageObject. I've done something similar in a gadget and it's fast enough not to be noticeable. You can also set min/max dimensions so shrinking/stretching to fit becomes a breeze.