Digital Marketing Tutorial Blog
Dave Ingalls
Dave’s Comments (Digital Marketing Tutorial Blog): This IMC Blog entry is a bit different. I’m going to help readers who use Joomla and/or WordPress find out if they’ve got any Internet Explorer 6.0 (“IE6”) display issues with either their Joomla Web site templates and/or WordPress blogging themes. If they do, I also outline how they can get a head start on fixing those problems by looking “under the hood” of these 2 very popular Web applications. Why am I doing this? Because I just went thru this situation myself and I thought I’d spare my readers some of the pain I went thru finding a solution!
According to Market Solutions, 2009 YTD IE6 usage still stands at 18% of all Internet browsers. IE7 (42%) and IE8 (6% and climbing rapidly) are both taking share from IE6, but at this writing, IE6 is still the THIRD most popular Web browser in terms of usage.
So why worry about high IE6 usage by Web surfers? Because IE6 is NOT the same as IE7 or IE8. Without getting into the details, let’s just say that IE7 and IE8, along with all popular versions of the Firefox Web browser, know how to correctly interpret and display the latest underlying HTML, CSS and XHTML code that most popular Joomla! (content management system) Web site templates and WordPress (blogging software) blog themes use. IE6, however, was developed before these new browser software standards were adopted by all browser manufacturers. And with almost 20% of Web browser usage, IE6 can make your Web sites and blogs look more like a Picasso painting (no offense to the master) than the beautiful sites/blogs you see in standards compliant browsers to 1 in 5 Web surfers! Not a good situation!
What did I do about this potential problem and why did I care? Because this Digital Marketing Tutorial Blog uses WordPress!
Here’s what I ended up doing after much surfing and trial/error.
First you have to be able to see the problem! And since most serious Web site designers and blog writers are not using IE6 as their Web browser, how do they see the potential IE6 display problems? Short answer – go to the Xenocode.com browser sandbox and download the free (and fairly small) browser software plugin. (Sorry – this plugin is no longer available, but there are many free Web sites that will provide the same capability – just Google “cross-browser compatibility”.)
Once set up on your computer, you’ll be able open the browser of choice, including IE6, from this page, then open your Joomla Web site and/or WordPress blog in IE6 and see if there are any IE6 display problems.
Hopefully you’ll see the same beautiful site and/or blog displayed in IE6 as you see in the more recent IE and Firefox browser versions.
But what if you see a jumbled mess displayed in IE6? On to Step 2 – how to fix IE6 display problems!
This step is a bit trickier than step 1 because the odds are your IE6 display problems will NOT be the same as the ones I had, but the good news is that the mechanism to fix them will be the same. Again, this is not a step-by-step tutorial, it’s a quick how-to that will hopefully get you on the right track toward a fix much faster than I was able to initially find.
Long story short, you will probably find that IE6 is not properly interpreting/displaying certain instructions in the CSS (Cascading Style Sheet) code. In my case, the problem was with the Joomla Web site template I use and the “min-width”, “max-width” CSS instructions in it – IE6 can not properly interpret these instructions.
The CSS code is in a separate file ending in “.css”. And Microsoft, bless their souls, implemented a fix for their browser versions called “conditional comments”. You’ll find lots of detailed info on this when you “google” this term so I won’t dwell on it here. Bottom line – this bit of “conditional comment” code is what you put in the “Head” section of your Joomla or WordPress “index.php” file. It will allow you to call an IE6-specific CSS file whenever the browser trying to view your site is IE6.
Now copy the existing CSS file and re-name it something like “ie6specificinfo.css”, put the appropriate IE conditional comment in the head section of your index file calling the IE6–specific CSS file, upload both files to your Web/blog host service and start experimenting with fixes using the Xenocode browser sandbox to instantly see what’s being displayed in IE6.
What to change in the IE6-specific CSS file? Just “google” phrases like “ie6 problems”, “ie6 display problems” or “ie6 fixes”. There’s plenty of advice out there – read up a bit and then start looking for these potential problems in the IE6-specific CSS file. This is a link to a Web page that lists many of the major IE6 CSS problems. Try the fix, upload the file and see what it looks like in IE6.
I wrote this blog entry to help my readers find out if they have any IE6 display issues with their Joomla and/or WordPress applications, and if they do, then outlined a mechanism they can use to find out what the underlying problem is and fix it. Good luck!