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 December 3rd, 2009 by George Huger
We recently created a contact submission form on a client’s Facebook page, and were not satisfied with the default user experience. For starters, the form opened a new window, and there was no way to redirect the user back to a confirmation message on the Facebook page.
We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up.
The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.
Continue reading “Submitting a Contact Form via AJAX From Your Facebook Page” »
Tags: Facebook, FBJS, FBML, Javascript
Posted in Facebook, Javascript, Web Development
Posted May 25th, 2009 by George Huger
Rumors have been floating for some time that Microsoft would be rebranding its Live search engine, especially after its acquisition of Powerset last summer. Although recently leaked screenshots implied the name might be Kumo, AdAge is reporting today that the new engine will be named Bing.
Along with the rebranding comes a reported $80 million advertising campaign spanning TV, radio, print and online, created by New York’s JWT advertising agency. The ads will try to convince consumers that although they may be happy with their current search engine (i.e. Google), they don’t know how good the experience could be.
How Microsoft plans to migrate its current users to the new domain remains to be seen. Certainly they will lose some of their users in the switch, but we think the move makes a ton of sense. Here’s why:
Continue reading “Bing – Microsoft’s New Search Engine” »
Tags: bing, live, microsoft
Posted in Search
Posted May 23rd, 2009 by George Huger
At Illuminati Karate we love a challenge. So when our client called needing two lists of 1500 IP addresses geocoded as quickly as possible, we rose to the occasion. With the help of PHP and a freely available web service we were able to complete the task in just under an hour. Here’s how we did it.
Continue reading “Free Webservice to Geocode IP Addresses Saves The Day” »
Tags: geolocation, JSON, REST
Posted in PHP, Web Development, Webservices
Posted May 18th, 2009 by George Huger
Today marks the official launch of Wolfram Alpha, which is a mathematically based “computational knowledge engine” that derives some of its datasets from the web. Most news outlets will refer to it as a search engine, but the distinction is important:
Traditional search engines, like Google and Yahoo, seek to index pages on other websites and direct their searchers to these pages. Wolfram Alpha’s goal is quite different – it seeks to extract data from other sources to create a massive internal database, which it will then use to answer its searchers’ questions directly. Where Google and Yahoo serve as middlemen directing searchers to relevant properties, Wolfram Alpha contains all of its answers to its own website.
Continue reading “Wolfram Alpha: First Impressions” »
Tags: Wolfram Alpha
Posted in Industry News, Search
Posted March 28th, 2009 by George Huger
When you get ready to change web hosting companies or launch a new website, you may be asked to change your DNS settings to use the new host’s nameservers. Its a simple thing to do, but we thought you’d like to know what that means.
The following is a crash course on the Domain Name System, or DNS, which will help answer some of those questions. Its intended for those unfamiliar with the concepts, and does not contain any code.
Continue reading “Introduction to the DNS and Nameservers” »
Tags: dns, nameservers
Posted in Web Hosting
Posted March 25th, 2009 by George Huger
Over the last week you’ve probably noticed the “definitions” (read: ads) in the Twitter sidebar. Until today, they’ve been promoting Twitter’s in-house services, such as encouraging users to add a Twitter widget to their blog. But as of today we’ve started seeing three different offsite ads appearing in this space, pictured in the image to the left. Further investigation reveals that these ads represent the launch of a new monetization strategy for Twitter.
Continue reading “Twitter Gets Ads, Courtesy of Federated Media and Microsoft” »
Tags: federated media, microsoft, twitter
Posted in Industry News
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
Posted March 11th, 2009 by George Huger
jQuery has a powerful collection of selectors which make selecting a specific collection of elements much simpler. Among my favorites are :text, which matches one-line text inputs, and :checked, for determining what checkboxes in a group have been selected. But sometimes our filter criteria relies on domain specific information.
Continue reading “Write Your Own jQuery Selectors” »
Tags: custom selectors, extend jquery, selectors
Posted in Javascript, jQuery
