JavaScript split Bugs: Fixed!

The String.prototype.split method is very handy, so it's a shame that if you use a regular expression as its delimiter, the results can be so wildly different cross-browser that odds are you've just introduced bugs into your code (unless you know precisely what kind of data you're working with and are able to avoid the issues). Here's one example of other people venting about the problems. Following are the inconsistencies cross-browser when using regexes with split:

• Internet Explorer excludes almost all empty values from the resulting array (e.g., when two delimiters appear next to each other in the data, or when a delimiter appears at the start or end of the data). This doesn't make any sense to me, since IE does include empty values when using a string as the delimiter.
• Internet Explorer and Safari do not splice the values of capturing parentheses into the returned array (this functionality can be useful with simple parsers, etc.)
• Firefox does not splice undefined values into the returned array as the result of non-participating capturing groups.
• Internet Explorer, Firefox, and Safari have various additional edge-case bugs where they do not follow the split specification (which is actually quite complex).

http://blog.stevenlevithan.com/archives/cross-browser-split

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

Written by Benjamin / September 15, 2009

The best strategy for dealing with Internet Explorer 6 is not to support it.

Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. You've spent hours on it, but you just can't seem to get your layout right. I can empathize. I can also help.

This isn't one of those rants about IE6 or a campaign to try to kill it. There are enough of those around the web, but they don't help if you need to support IE6 because it still has a significant enough marketshare that you can't ignore it for business reasons. No, this is the resource you've been hoping for.

I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheetsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. Where possible, I've done my best to provide the cleanest and valid solutions to each bug instead of ugly hacks. I've also tried to give proper credit for each case, but some of the solutions have been shared so many times that finding the original discover of each fix is difficult. If you see a missing credit or if I missed a bug and fix, please contact me and let me know and I'll update this page.

This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Don't be fooled, however, this cheatsheet is as much for me as it is for you.

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Eazy IE6 PNG fix

http://www.nikibrown.com/designoblog/2009/08/21/eas-ie6-png-fix/

Introducing IE=EmulateIE7

Bill Gates’ recent Tech Ed keynote and Tony Chor’s follow-up blog announced that IE8 Beta 2 will be available in August in many languages. We are encouraging sites to get ready for Beta 2 prior to release as it will present a big jump in IE8 browsing traffic.

What does “getting ready for IE8” mean for web sites? IE8 displays content in IE8 Standards mode – its most standards-compliant layout mode – by default. In previous blog posts, we’ve discussed how this aligns with our commitment to Web standards interoperability. However, browsing with this default setting may cause content written for previous versions of IE to display differently than intended. This creates a “get ready” call to action for site owners to ensure their content will continue to display seamlessly in IE8.

The preferred response to this call to action is to update the site to ensure that IE8 is provided with standards content fitting the DOCTYPE. However, we know it is very important to give site owners the chance to update site content on their schedule without affecting user experience. As such, we provide a meta-tag that tells IE8 to display an entire site or a specific page like it did in IE7.

In IE8 Beta 1, that option is the “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. However, the scenario this doesn’t address is when IE=7 is applied as an HTTP header to a site that contains Quirks mode pages. The IE=7 HTTP header will force all pages – both Quirks and Standards – to display in IE7 Standards mode. Developers using this header while updating their sites would then have to add the “IE=5” tag to each page they want to keep in Quirks mode. This logic is fine for many websites. However, if a site has lots of Quirks mode pages, or for the case where pages with frames host a mix of Strict and Quirks mode content – as brought to light by IE8 Beta 1 user feedback – the compatibility opt-out adds a bit more work than we intended.

In response to the great IE8 Beta 1 feedback we’ve received so far, we are introducing the “IE=EmulateIE7” tag to address this problem. EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. We believe this will be the preferred IE7 compatibility mode for most cases. Support for IE=EmulateIE7 is available now as part of the IE June Security Update for IE8 Beta 1. Installing this update will enable you to verify you’ve applied the EmulateIE7 tag to your site correctly.

In summary, IE7 compatibility support looks as follows:

Content Value	Details
IE=7	Display in IE7 Standards mode; Already supported in the IE8 Beta 1 release
IE=EmulateIE7	Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode; Available through the IE June Security Update for IE8 Beta 1

There are two ways to implement this tag:

• On a per-site basis, add a custom HTTP header

X-UA-Compatible: IE=EmulateIE7

• On a per-page basis, add a special HTML tag to each document, right after the tag

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content. Although adding this tag will prevent most display issues, you may also need to update your site to properly detect IE8. To learn more about IE8 document compatibility and browser detection, check out the IE Compatibility Center.

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

Button Width in IE

Ever been annoyed with extra padding in a input button in Internet Explorer?

However, as it turns out, that fix doesn't work so well when the button is inside a table cell. Here is an image of the problem (table cell in red) and a workaround for that.

The workaround is to use width:1; by default and feed IE a different value (width:auto;) using a conditional comment. It actually works pretty well.



http://jehiah.cz/archive/button-width-in-ie-revised

DD_belatedPNG

• You can use 24-bit alpha-translucent PNG images for the background-image CSS property in Internet Explorer 6.
• Support for background-position and background-repeat. Apparently Angus of TwinHelix has also figured out a way!
• There is no usage of AlphaImageLoader, so this doesn't have the buggy z-indexing associated with that filter.
• Responds to Javascript element.style assignments and the :hover pseudo-class.
• ~7.5Kb uncompressed … ~6Kb compressed
• Easy implementation:
  <!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->
  

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Adding input:focus functionality to IE using prototype.js

JS:
Event.observe(window, 'load', function() {
var fields = $$("input");
fields.each(function(el) {
$(el).observe('focus', function(){this.addClassName('focused');});
$(el).observe('blur', function(){this.removeClassName('focused');});
});
});

CSS:
input:focus, /* works in FF without javascript */
input.focused /* used by js */
{ background-color: #f7cd72; }