Long story short, I'm making an HTML email (yeah, I know). I've got it to the point where it looks great in GMail, Yahoo Mail, Thunderbird and Outlook 2003 (haven't tested 07...). The only hiccup is Hotmail (Windows Live Mail). The fact that it doesn't support background images at all doesn't bother me with regards to my layout...it's that because of the layout, I need to set the width of the table to be a set value (550px) instead of a percentage (80%) or else my header image will just be floating in space and looks ugly.
So I now have two options as I see it - make a Hotmail-specific css rule to set the width as a static value (I don't know if this is possible) or to have my mailer template get modified on the fly based on whether or not the recipient belongs to '#hotmail.com'. I'd prefer the former rather than the latter.
Clarification: To keep it simple, imagine a 550px wide by 150px high div. It has a background image with repeat-x. Inside that div, I have an img which is 150px high and 550px wide. If the outer div is set to 80% of the viewport, it should expand to the left and thus expose the repeating background. This is what's expected. Since Hotmail doesn't show background images, it's just a blank white space.
Further clarification: Go here to see an example of what I mean.
Try putting this in every image tag:
style="display: block"
You can't have different CSS as it's all supposed to be inline. You should also be using tables (I know, I know). If you could post some source, I could help a little further.
In the end I had to modify my email right before sending based on a custom rules list (regex replace based on domain).
I know it's old question but it might be of use to people still struggling with web and windows outlook and windows mail.
I found a way to hide elements specifically from windows outlook and mail app:
<span style="mso-element:field-begin;"></span>
Content to hide from Outlook
<span style="mso-element:field-end;"></span>
reference this great blog.
also you could target all outlook apps (mobile, web, desktop) as:
<!--[if mso]>
<div> Your content that you want visible </div>
<![endif]-->
you could also invert it with other conditions and target specific versions,
something like:
<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->
more on that on this link.
As for displaying backgound images in desktop/windows versions of outlook (mail app and outlook ms) you can use VML and more about that you can find here.
Related
I'm building a Web Extension that injects a local page and I reached a strange Chrome limitation on some websites: I can't set the iframe to be transparent:
Try this on GitHub.com (after login) or on Google:
document.body.insertAdjacentHTML(
'afterbegin',
'<iframe style="background: red" srcdoc="<style>body {background:none}">'
)
You'll see that the iframed page’s background (white) is shown instead of the element’s background (in this case made red to highlight the issue).
If you try the same code on StackOverflow or Twitter you'll find that the iframe is red.
I assume this is due to security but strangely it's even happening on this simple website that lacks any security header: https://sjmulder.nl/en/textonly.html
Firefox and Safari are not affected.
For anyone looking for a quick copy-paste answer: include a color-scheme meta header in the injected iframe. It must match the color-scheme header of the web page, if one exists. Do not add the meta header if a website does not have one. As this requires programmatic effort to figure out if such header exists a what the content value is, those steps are omitted, but once the scheme is known, the injection code would look something like this:
document.body.insertAdjacentHTML(
'afterbegin',
'<iframe style="background: red" srcdoc="' +
'<meta name=\'color-scheme\' content=\'light dark\'>' +
'<style>body {background:none}">')
Next a more detailed answer, and how I discovered it.
The screenshots show macOS in dark mode. If you go to OS settings and toggle the appearance between light and dark, this should alternate the white color and red color behind the iframe. Try and see if this happens.
After some experimentation, I discovered iff a website has a meta header for color-scheme:
<meta name="color-scheme" content="light dark">
as is the case with Github.com and sjmulder.nl, an iframe without matching header is only able to handle light mode correctly, and renders a white background if user device is set to prefer dark mode. I suspect this is because "major browsers default to light mode if not otherwise configured".
You can experiment with this and switch the color mode header on a test website to "light" (only) and "dark" (only) without specifying anything in the injected iframe; or define it in the iframe and not on the website, then switch the device color mode preference to see the effect. The conclusion I reached was the headers must match for iframe background color to get applied correctly.
I reached a strange Chrome limitation on some websites
When a website has not defined a color-scheme meta header and the injected iframe has not defined one either, there is no mismatch, and there is no issue, which is why this problems only presents on some websites. I also tried other browsers (Edge, Opera) and they have this same issue, at least on macOS. But it can be fixed in an extension by first checking if there exists a meta header on the page, and if yes, applying that same header to the injected iframe.
Read #neea’s answer for a broader explanation, but here's a quick fix that works anywhere: Add the CSS color-scheme: normal to the iframe, either via stylesheet or inline:
<iframe style="border: 0; color-scheme: normal" src="your-url.html">
Only do this if the iframed page will display correctly on both dark and white backgrounds. You might also need to set color-scheme: normal in your iframed page via meta tag, but this should not be necessary.
Why Chrome does this
Light schemes generally show black text and white background and dark schemes are the opposite. Chrome uses the color-scheme property to understand what schemes a website supports. The lack of it means it only supports the light scheme.
If the main page is being shown in a dark schemes and the iframed page isn't, with a transparent background you would get the iframed page’s black text on the main page’s black background.
This is a safety mechanism to ensure that the iframed content is still readable. If you drop it, you will need to manually ensure that the iframed page is readable on a dark background too.
Live demo
You can see that neither iframe has a background in both dark mode and regular mode.
Page only has one scheme, iframe never shows a white background: live link
Page only 2 schemes, iframe never shows a white background: live link
Following what #neea has said, which is true, I want to propose another code fix, since the color-theme fix doesn't do anything for me.
Since you use the iframe for a chrome extension, you simply need to have the iframe injected with a content script and then get the value of the page of the meta tag, which can be done easily with document.querySelector('meta[name="color-scheme"]')?.content
Personally, in my project I used react and react-frame-component, and I got it by inserting this into the head (I also use TS):
<meta
key="1"
content={
(document.querySelector('meta[name="color-scheme"]') as any)
?.content ?? 'light'
}
name="color-scheme"
/>,
I verify if the site has that tag, then I take and if not, it defaults to light mode.
This needs to be injected into your iframe HEAD. Then it will work for sites such as google dark mode or github.
Element.insertAdjacentHTML()
The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.
It has something to do with how chrome parses HTML and the order it uses.
I want to view the images inside the email signature on all email clients.
Initially I created my signature using the classic:
<img src="https://drive.google.com/uc?export=view&id=1e0siJmU...">
This worked great for gmail and apple mail but outlook gives problems as it doesn't download images for security. Annoying! I have seen that instead outlook desktop displays images without problems if they are embedded via base64 code like this:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...
. Now, however, it does not work in gmail as it does not even display the images and therefore the related social links.
So I thought of doing a sort of if clause that identifies the client and based on that write what kind of image I want to insert as a background-image on the style applied to the html body
I searched a lot on the web and on the stack and found many articles that dealt with conditional css but none that dealt with image change
I decided to use conditional css and came:
<body>
<!--[if mso]>
<style type="text/css">
#photo {
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...');
background-size:contain;
}
</style>
<!--<![endif]-->
<!--[if !mso]>
<style type="text/css">
#photo {
background-image: url('https://drive.google.com/uc?export=view&id=1e0siJmU...');
background-size:contain;
}
</style>
<!--<![endif]-->
<img id="photo">
</body>
but unfortunately it doesn't work. tips? thanks!
Signatures are essentially being forwarded every time they're being used. I would guess that any conditional code is being stripped on initial send or even when a signature is imported and set up. There will definitely be some type of cleansing done to ensure their users aren't trying to insert Javascript or anything else malicious.
Further to that, Gmail also has a way to block images and the Outlook option can be turned off so that images are downloaded. No doubt other email clients are in the same boat.
Essentially, you'll never find a full proof way to display images for everyone. I would advise you respect the recipients decision and just build a solid signature that renders as expected.
I have a problem with css rendered differently in browsers, in IE to be specific, thought I could ask here for help, hopefully you can help me out with this : ))
my website is www.artisticworksllc.com if you go to the link, on homepage, below the slideshow there are five images linking to different categories of website.
I tested in Firefox & safari and they look ok, in Internet Explorer they are not aligned, fifth image comes down in IE. When I tested it with IE with compatibility view turned on, the images are aligned but other parts of website are messed up (image galleries for example)
Can anyone help me with this please? what to do? I dont know if this is padding or what is causing it. I know I have to implement some kind of IE hack but I dont know what and how : (
help is much appreciated : ))
Thank you
Before going down the crazy path of writing custom CSS per browser (and potentially version): get rid of the XHTML 1.0 Transitional doctype and move to one of the strict types. Preferably html 4.01 strict.
This alone will fix the vast majority of your boxing issues.
Some more info on Doctypes:
Read both pages of the following site. Great links on page 2.
http://www.communitymx.com/content/article.cfm?cid=85fee
http://www.alistapart.com/articles/doctype/
And, for "light" reading: http://hsivonen.iki.fi/doctype/
Basically, all browsers have various degrees of "standards" compliance. Anything that kicks off "quirks" mode or is "transitional" should be viewed with suspicion. However, once you understand what a doctype is and your choices around them, then you'll completely understand what's going on for any display differences you do run across.
For me, one of the best ways to learn was to create a simple floating div layout controlled by CSS. Some div's held images, others had extra long text, all of them had a border so I could see where things were breaking. I then tried various doctypes and viewed the page in the major browsers. Sometimes the differences were minor like slighly different default padding or margins; sometimes they were outrageous such as one browser allowing styles to be inherited that another didn't.
We have a decent sized web app (200+ pages) with fairly complicated layout requirements and the ONLY "hack" I've had to implement was to force the image tag (img) to be display:block; it looks pixel perfect identical in every browser and we are not using conditional style sheets or performing any type of browser sniffing.
After your link to pull in the CSS, put this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Make a second style sheet called ie.css and just change the parts that need to for IE.
You also have the ability to add versions:
<!--[if IE 7]>
for example.
you need to target versions of ie with conditional comments; using them you can set specific styles for any and all versions of ie to make them look how they should.
Check you padding and margin attributes for the list elements. Perhaps your size arrangements are right, but since every browser renders styles differently, IE is responding differently.
I have just created a website which looks fine on firefox PC but looks totally different on Firefox Mac.
On Mac I don't see a div background image.
On mac in the footer, an item that is floated to the left appears on the right and an item that is floated to the right appears on the left.
A facebook div that I have commented with <!-- appears on Mac but not on PC.
The site is: http://www.ruthrudin.co.il
Can anyone help with these problems?
I only briefly had a chance to look at the source, but did notice that on line 66 you illegally nest an HTML comment <!-- </div><!--. Your usage of <SCRIPT LANGUAGE="JavaScript"> is invalid and should match how you did the jquery <script type="text/javascript">your code here</script>.
Run your code through a validator. The browsers do differ in how they handle invalid markup across operating systems, even from the same vendor.
I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).