Posted December 7th, 2009 by George Huger
As you know, IE6 does not render transparent PNGs appropriately by default. We can work around it using IE’s proprietary expression CSS property, and there are myriad libraries available to make this easier. However most approaches usually involve creating a separate CSS file for IE6, and most don’t support repeating background images (via the background-repeat CSS property).
We recently stumbled into Drew Diller’s belated PNG fix for IE6, which is the simplest implementation so far, and fully supports repeating background images. All that’s needed is to include a Javascript file and pass an appropriate CSS selector to the library’s fix() function, and the library handles the rest.
The following code will implement the PNG fix for all elements with the class “png_fix”, using the DD_belatedPNG library. Its wrapped in conditional comments so that only IE6 will include the script:
1
2
3
4
5
6
| <!--[if IE 6]>
<script src="/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.fix_png');
</script>
<![endif]--> |
Note: its important that you leave the script include and the call to fix() in seperate script elements. If you combine them into one, the fix will not work.
The above code can be adapted for nearly all use cases, but there are a couple of known issues that you should be aware of:
- The fix will not work on the <body> tag. If you need to use a PNG on the body tag, just add an extra container div and apply the PNG background and fix to it instead.
- <tr> and <td> elements are not supported. This is unsurprising, as these elements already behave strangely with background images in many browsers, especially <tr>’s.
- <input type=”image”/> elements are not supported. Use a <button> element instead.
We’ve used this library in several live projects, and its worked wonderfully. Hopefully it will save you some time and headaches too.
Posted in Browser Testing, CSS
Posted March 24th, 2009 by George Huger
Cross-browser testing is one of the dreaded tasks of web development, largely because there’s no easy way to install multiple versions of each browser on the same machine. It can be forced, but having 3 versions of Internet Explorer, at least 2 versions of Firefox, Safari, Opera and Chrome all installed on the same computer is hardly appealing.
Microsoft’s SuperPreview, released as a beta last week, looked promising but in practice fell short in several key areas. The biggest problem is that although SuperPreview can snapshot a page in IE6 or any other browser, it’s just that: a snapshot. Layout bugs are just the beginning of IE6’s problems – it also falls short in both Javascript and CSS capabilities, which may not be evident in a screenshot. Furthermore, SuperPreview will eventually be a part of Expression Web 3, which is not free.
Continue reading “Dead Simple Browser Testing With Xenocode’s Browser Sandbox” »
Tags: IE6 testing, Xenocode
Posted in Browser Testing, Web Development Tools
Posted March 19th, 2009 by George Huger
Microsoft has just unveiled the beta of a new product for web developers: Expression Web SuperPreview for Internet Explorer. If it delivers on its goals, it promises to change the lives of web developers as fundamentally as Firebug.
Expression Web SuperPreview lets you view your website in IE6, IE7, IE8 and any other web browser you have installed, and switch between them as you please. That means you can switch between viewing your website in Shiretoko (Firefox 3.5 beta), Internet Explorer 6, and the Safari 4 beta with the click of an icon. You can even compare them side by side. Perhaps the coolest feature is that you can overlay the different renderings on top of each other in an onion-skin mode, allowing you to fully appreciate the Cuil-like approach IE6 takes to rendering webpages.
Continue reading “Microsoft’s New Expression Web SuperPreview Makes Cross-browser Testing Painless” »
Tags: cross-browser testing, microsoft, superpreview
Posted in Browser Testing, Web Development Tools
