The most important differences:
List of Doctypes lifted from W3C
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
AutisticCuckoo from the Sitepoint forums claims that XHTML is not good to use for webpages because IE and other browsers doesn’t support it. But why does our XHTML pages work on IE?
Resources
]]>IE6 and IE7 adds an extra space under an image.
Fix:
Add font-size:1px into the containing div.
Fix courtesy of http://blog.creonfx.com/internet-explorer/ie6-image-whitespace-bug
]]>A solution would be to put the bullets in the encasing link or span, inside the <li></li>
Reference: http://www.sitepoint.com/forums/showthread.php?t=549599
]]>Why bother?
There are hundreds of different email clients, each having its own version of how to render your HTML email. It will be best to follow some simple guidelines to avoid alienating your readers with quirky email clients.
Let me summarize the fundamental best practices:
Background Images
The Email Standards Project is spearheading the effort to get everybody on the same page. They have tested several email clients using this template (both web based and desktop) for CSS support. Visit their website to see the results.
What If Images are turned off?!
Many email clients set the display of images to “off” by default. So you have to take this into account and make sure that your email will still be presentable in this case.
Linking
Known Issues
SPAM
You don’t want your hard work to go down the Junk Mail drain. Better check your email for it’s “spamminess”. There are tools to do this such as http://spamcheck.sitesell.com/
Testing Checklist
Conclusion
The KISS principle can definitely be applied here. While CSS support in browsers are coming together, email clients have a long way to go to catch up.
]]>However, none of them was the solution to what we exactly needed because of our file structure. We had a unique sidebar navigation include (nav.inc.php) for every subdirectory.
The ALA solution was ugly, they inserted php snippets in every <li> entry. Hicksdesign’s solution was ok, but it required coding in a unique ID on every individual page, which was not a good idea for us.
So we came up with our own solution.
Here’s what we did:
Here’s the Javascript code that was used:
<script language="javascript">
function set_current_nav()
{
document.getElementById('<?=$current_page?>').setAttribute('class','selected');
}
set_current_nav();
</script>
]]>A table of what the different browsers support with respect to:
IE adds more spacing than the others when using the display:block declaration.
The Solution
Insert these two statements in your li tag:
float:left;
clear:left;
References
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
]]>The library fixes the following issues:
IE does not render PNG transparency, it just greys the transparent area. We thought Microsoft engineers were smart?
The Solutions
IE mysteriously doubles the margin on a floated element. Suppose that you float:left an element and at the same time specify a margin-left setting, IE doubles the margin on that element.
The Fix
The fix is surprisingly simple. Adding a display:inline to the element takes out the bug.
References
http://www.positioniseverything.net/explorer/doubled-margin.html
]]>