OK, this is not the full-on rant that has been sitting in drafts for 8 months now. It is great to see that the ‘kill Internet Explorer 6′ movement is increasing in active participants, with a growing number of websites allowing distribution of the message that this browser needs to be usurped by far better, standards-compliant browsers. However some of us still need to bend to the whim of the 8-year-old browser, to a certain extent.
Anyway, lets have a look at the live PocketSmith login page in Internet Explorer 7. I won’t show you the Safari / Firefox / Chrome version, because that is unfair. After all, they support crazy things like nice drop shadows and rounded corners ala CSS3 – and that comparison just isn’t fair on poor old Internet Explorer.
Current PocketSmith Login Page in Internet Explorer 7
Not too bad. Now lets look at the very same page in Internet Explorer 6 (ignore the grotty background on that PNG image on the top left. Thats another story.)
Icky! PocketSmith Login Page in Internet Explorer 6.
Useable, but ugly as sin. So I decided to spend a couple of hours on this today, and sort out this issue. Purely out of tenacity more than any real need. I refuse to be beaten into submission by that damnable browser. And here are the results.
Hoorah! Fixed PocketSmith Login Page in Internet Explorer 6.
So. How did I do this? Basically, I re-wrote CSS attributes for the containers displayed on the front page from scratch, for Internet Explorer 6. Mostly, adding position:relative and zoom:1 attributes, and providing IE6 specific widths, heights, margins, and padding values.
And all was well. So, if you are having issues with display in Internet Explorer 6, create yourself a conditional stylesheet, and get re-writing. Sorry – the only way to go until we can drop IE6 support completely.
So are you now billing MS for the extra work?
-shakes fist at IE6-
You don’t seem to have employed the standard IE6 pngfix code which should allow you to use pngs in the usual way….
And the pngfix script…
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(”onload”, correctPNG);
Email me if the code doesn’t come out properly