I have a site here: bgflirt.com
On the right side of the pictures in the middle is a div tag that shows nothing in everything but firefox. There is a flash object over there and a "test" string. Any ideas why it doesn't show in IE and Chrome ?
First thing, try to load flash object with SWFObject. It makes it easier to embed flash animation into your page and takes care about browsers problem.
Second thing, you got this in your code just before your swf insertion :
<div class="entry">
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:Valida… Още..
</div>
You use a strict doctype. It can lead to problem depending on browser.
Related
I'm relatively new to HTML Email Development, and I'm trying to improve my understanding of HTML Email structures by dissecting HTML Emails on "reallygoodemails.com".
In my forays, I've come across four different ways to create a conditional fallback for email platforms that are NOT Microsoft Outlook.
Version 1.
<!--[if !mso]><!-->
<style>
.innerTable{
border: 1px solid black;
}
</style>
<![endif]-->
Version 2.
<!--[if !mso]><!---->
<style>
.innerTable{
border: 1px solid black;
}
</style>
<![endif]-->
Version 3.
<!--[if !mso]><!---->
<style>
.innerTable{
border: 1px solid black;
}
</style>
<!--<![endif]-->
Version 4.
<!--[if !mso]>-->
<style>
.innerTable{
border: 1px solid black;
}
</style>
<!--<![endif]-->
Can anyone tell me what version I should use and explain WHY that particular version actually works cross-platform? Like, how does the syntax of your chosen fallback trick MSO into ignoring the code?
Conditional comments are a mecanism implemented by Microsoft in Internet Explorer (up until IE9) and in Word’s rendering engine (used by Outlook 2007 and above). The idea is to hide content for the rendering engine through a regular HTML comment so that no other rendering engines will see it. I’m going to detail the syntax that I use and then I'll get back to the difference between the syntaxes you observed.
Here’s the syntax that I use to hide content from Outlook:
<!--[if !mso]><!-->
<style>
.innerTable{
border: 1px solid black;
}
</style>
<!--<![endif]-->
Let’s break this step by step and see how Outlook and other rendering engines will interpret this.
<!--: This is the opening of an HTML comment. Every rendering engine is expecting what’s next to be part of the comment and won’t display it on screen.
[if !mso]>: This is the condition for rendering engines that support conditional comments (IE, Outlook). Other rendering engines and browsers will just see this as plain text, part of the comment. But IE and Outlook will evaluate the condition. The condition here is !mso (not mso). Outlook will see this and think “Well, I am mso! I’d rather ignore everything that follows until I find the [endif] statement.”
<!-->: This closes the HTML comment opened on step 1. Outlook ignores this as it’s part of the !mso content. But other rendering engines will understand this and think “Ok, this comment is over. Better get ready to execute and display what’s next.”
<style>…</style>: This is our HTML content. It’s hidden for Outlook because it’s still part of the !mso condition. And other rendering engines will render this as normal.
<!--: This is the opening of an HTML comment (again).
<![endif]: This is the closing condition statement for rendering engines that support conditional comments (IE, Outlook). Outlook will evaluate this and think “Ok, condition time is over. Back to work then.”. Other rendering engines and browsers will just see this as plain text, part of the comment.
-->: This is the closing of the HTML comment opened on step 5. This is evaluted by all rendering engines.
Now you might be thinking: “Why did we use <!--> on step 3 and not just -->?” Well this is a nice trick at play to take in account for other rendering engines that do support conditional comments (like Internet Explorer). IE will see the !mso condition and think “Well, I'm certainly no mso. Let’s see what’s next for me!” If we were to just have a closing HTML comment (-->), IE would freak out as it’d see a closing without an opening. So that’s the trick: <!--> both opens and closes an HTML comment at the same time. We could also write this <!-- --> or <!-----> (as you noticed in your Version 2 and 3).
As for the difference between the other versions you posted, Version 1 and 2 only use <![endif]--> as a closing statement. This is correct for Outlook, but incorrect for any other rendering engines. Luckily, they render this as an HTML comment anyway. So it ends up working correctly, but it is not valid in a standard way.
So my recommendation is to always use the following syntax to hide content from The Outlooks:
<!--[if !mso]><!-->
…
<!--<![endif]-->
And if you need to show content only on The Outlooks:
<!--[if mso]>
<![endif]-->
Other ressources that might be useful:
Different conditional comments examples
Microsoft documentation about conditional comments
A blog post I wrote about Outlook rendering engine
What do I need?
I need to make all content of the email into a single A4 size Page.
CSS
<body style="height:297mm;width:210mm;margin-left:auto;margin-right:auto">
----email content---
</body>
when i try to viewsource email css property were already there.
Problem
when try to print from ms outlook then html content move in 2 page of which my need is 1 page.
working css in browser
when i try to print the same content from browser then im able to get html content in A4 size page.
can anyone suggest how to shrink all content into single a4 size page.
any suggestion is most welcome.
Stop looking for a reason : mail clients are very though regarding CSS properties.
When you write an e-mail, almost no CSS property is accepted.
You can find an exhaustive list here.
After having played around with it a little bit, I can tell you that the best option to send a formatted mail is to create a table and style this table with inline styling.
Good luck with that, you will need it.
I suggest you to write styles in pixels. I have a such big experience in Email markup and Microsoft Outlook really harmful.
And Im not sure that margin: auto will work properly in Outlook.
So, try to write for example:
<body style="height:500px;width:500px;">
The Solution that worked for me In Ms Outlook.
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-
microsoft-com:office:word" href="http://" style="yourstylinghere;"
stroke="f" fillcolor="#556270">
<![endif>
your content
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
I understand that in order to display outlook-specific HTML within an email I can implement code such as:
<!--[if (gte mso 9)|(IE)]>
Welcome to the newsletter.
<![endif]-->
However, how do I implement if/else logic. For example, without using CSS classes, I need to display one section of content in Outlook and a completely different section of content in other clients.
Is this possible?
(CSS Classes have proven to be unreliable hence my requirements for conditional HTML instead).
The conditional coding IS actually the IF/ELSE statement. The issue is the ELSE part is not built in. To solve your issue, you need something to hide the content you no longer want MSO to use but show up in all other clients.
This can be handled either through conditional classes (in the if statement) OR, as you mentioned you did not want to use classes, you can use the mso-hide:all css that is only recognized by Microsoft office.
Found a great example of this for reference. Pulled from this post:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
This is a good reference on usage of mso-hide:all
We have a graphic that doesn't render properly in IE10. It was working fine and then about a month ago, it quit working on IE10 but continues to display properly on Chrome and Firefox. I've read that HTML5 does not work properly with IE10. Is that the issue? Not sure of the fix.
<table width="" border="0" cellspacing="0" cellpadding="0"><tr><td width="220" valign="top">
<div class="menu">
<!--#if expr="${REMOTE_HOST} = /.usgs.gov$/" -->
<b>NGP Intranet</b>
<!--#endif -->
<p>
<!--#include virtual="include/tnm_menu.html"-->
</div>
<!--<p class="space"></p> --><br class="space" />
<img src="images/nav_spacer.jpg" width="185" height="1700" border="0" alt="This is a formatting graphic." />
</td>
Looking at the website you provided, not the fiddle as it is still pretty pointless as it doesn't replicate the issue at all, you can fix the "skewed" green space by adding to the CSS:
#nav {
padding:0;
}
For the other problem of the CSS menu, and possibly the above problem, I believe this is due to the HTML code being completely invalid. There are so many problems with the code that it doesn't know how to render it correctly. Give it a quick pass through a validator and you will see some errors. Firstly, you are using HTML5 elements, but declared the DOCTYPE as XHTML. And that's just the start, you have unclosed tags, obsolete attributes, unescaped characters, plus others.
The reason why this is a problem is that when using position:absolute the browser looks for the parent of the element but if it can't work it out, it could position the element anywhere. FF and Chrome work because they are less strict than IE over this, and I think this is an issue with FF and Chrome, they try to "fix" what the developer has done, but in my opinion this just breeds lazy and bad development.
Fix the issues, especially the unclosed tags, and it should help. (At least help narrow down the issue.)
IE 10+ does not support conditional statements. This makes developing for IE 7-11 tricky becaues IE10-11 parses the content within a conditional statement rather than ignoring it. For example:
<!--[if (IE 9) | (IE 8)]><!-->
// Code here will get rendered by IE10 & IE11
<!--<![endif]-->
So, if I want to have some code that will get rendered in IE 8 & 9 only, and then some code that will get rendered in IE10, IE11 & Firefox only, how do I do it?
EDIT: Note that I am not talking about styles here; I want to support significant structural changes in my webpage. E.g.:
<!--[if (IE 9) | (IE 8)]><!-->
<div>
<div>
Test
</div>
</div>
<!--<![endif]-->
<!--[if (IE 10]><!-->
<div>
<h3>Test</h3>
</div>
<!--<![endif]-->
I got this to work on my end. It looks like the format for the conditional statement was off.
<!--[if (IE 9) | (IE 8)]>
Code here will not get rendered by IE10 & IE11
<![endif]-->
Also, what type of code are you rendering, js, css?
If you want only IE8/9 to render a different set of markup from everything else (meaning IE10+ receives the same code as all other browsers), that's entirely doable:
You need to hide the (IE 9) | (IE 8) condition from all other browsers. This means having the comment portion encapsulate the entire block of code, not just the conditional expressions.
You need to allow all other browsers to see the other condition, while preventing IE8/9 from seeing that portion.
The (IE 10) portion is fine; IE8 and IE9 will know that they don't satisfy the condition and so will not render the markup even though it isn't commented out, whereas IE10 will never see the condition regardless (and neither will any later versions), so it will render the markup as it's not being hidden in a comment.
Hence:
<!--[if (IE 9) | (IE 8)]>
<div>
<div>
Test
</div>
</div>
<![endif]-->
<!--[if (IE 10)]><!-->
<div>
<h3>Test</h3>
</div>
<!--<![endif]-->