I'm developing email templates and I need to use display:inline-block but it's not working on gmail and outlook.
I just need to align an image with a text and I can't use a table .
Any suggestions to make the display:inline-block work or any other solution that works on outlook and gmail?
this my code:
<div>
<span style="display:inline-block;">this is not<br/> working:</span>
<img style="vertical-align:middle;" alt="" border="0" src="img.jpg">
</div>
thanks
There's only partial support in Outlook for display:inline-block;. Gmail should work fine.
Outlook 2000–03
Partial. Supports block, inline, list-item, and none.
Outlook 2007–16
Partial. Sometimes supports none.
Outlook Express
Partial. Supports block, inline, list-item, and none.
https://www.campaignmonitor.com/css/
Outlook doesn't support <div>
Outlook doesn't really support <div> Classes and styles You can use them, but styles do not always get applied. I would suggest a table for reliability.
Div styles not working in Outlook Emails
Good luck.
Try to use float:left in the style of "a" and "span"
<span style="float:left;">this is not<br/> working:</span>
<a style="float:left;" href="" target="_blank"><img alt="" border="0" src="yourImage.jpg"></a>
it works in my code
If it doesn't work on outlook it's because when it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.
I would recommend some online resources such as:
How To Code HTML Emails: MailChimp
This SO discussion may be helpful:
What guidelines for HTML email design are there?
Related
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
No matter what I try Outlook on Windows adds blue links to my HTML email signature - how can I remove them...
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none!important;color:#9d9fa2;">
<font color="#9d9fa2">0456 666 555</font>
</a>
</td>
Your example gave me an idea as a solution, and it seems to work for the colour but not the underline.
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none;color:#9d9fa2;">
<span style="text-decoration:none;color:#9d9fa2;">0456 666 555</span>
</a>
</td>
You wrap the link around a <span>.
On inspecting the signature in Gmail, Outlook strips the link of any styling. So it looks like there is no way around it.
I have found an answer that works for me! I am also amazed it works!
It involves duplicating any styling on the <a> tag and then adding an !important attribute to it.
BOOK NOW
Outlook will strip out the style with !important attribute leaving the regular style, thus no underline. The !important attribute will overrule the web based email clients' default style, thus leaving no underline.
Source
I have written the following html to add a image to a script that is being used to generate a email
<a href="http://www.marshalls-seeds.co.uk/" target="_blank">
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" alt="Marshall seeds logo"></a><br/>
If I check that in MS expression and outlook it works fine. But if I use hotmail or gmail the result look like this.
[Marshall seeds logo]<http://www.marshalls-seeds.co.uk/>
When I inspect the element I can see that the <img> has 'disappeared' and been treated as if it was text. But I cannot see why.
It is built-in security in gmail and Hotmail which removes the images.
Btw, you should always add width and height and en / in your <img>-tags.
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" width="XXX" height="XXX" alt="Marshall seeds logo" />
You have forgotten to close your <img> tag; now you can put / at the end of your <img> tag like this:
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png"
alt="Marshall seeds logo"/>
I am building a html email. it looks fine in outlook 2003, outlook 2007, hotmail, gmail, yahoo but in outlook web app has breaks between the rows. has anyone had these issues with outlook web app?
i have display block on the images but it looks like they get stripped out.
This was fixed by wrapping the elements in <span style="display:block"></span>
E.G:
<a href="http://www.url.com">
<img src="example.jpg" />
</a>
becomes
<a href="http://www.url.com">
<span style="display:block;">
<img src="example.jpg" />
</span>
</a>
but needs doing on all broken elements
Various styling is being stripped, so inline-styling will NOT work with images in OWA.
Here's a simple example of what Bill the Lizard was referring too:
<span style="display:block"><img src="myFancyImage.gif"/></span>
Without the above code it may look like extra padding/margin is creating space between tables and table rows/columns.... basically the issue that brought you to this page.
Use this inline css
<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>
I had the same problem, and unfortunately none of these solutions worked.
The display:block was always being striped out, no matter whether I wrapped the image in span or font tags.
Eventually, I found that wrapping the image in a DIV with inline width and height solved the problem. I guess because DIVs are block elements already, and it seems the only styles that OWA doesn't strip out are width and height.
e.g.
<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>
I tried the fix above and it didn't work - but this worked for me:
I just added this code at the top of the email code.
/* FIX FOR OWA */
.bdyItmPrt img { display:block !important; }
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>