This post is for those of you that use absolutely positioned page elements, or for those of you that might use DreamWeaver (I’m forced to use DreamWeaver on our current existing site, since that’s what was used to generate it in the first place), or for those of you that use “base” elements in your pages, and for quite a few other people as well, as this bug in IE 6 (and lesser) can be a real pain in the butt to figure out and get fixed.
My supervisor pointed out over the weekend that she is unable to select any snippets of text on our web site for some reason, and set me to fixing the problem. I opened the site in Firefox, and didn’t have a single problem. So, I decided to give it a shot in IE (still using IE 6 here at work). Sure enough, when I tried to select some text using the click and drag method, the whole darn page got selected, from the cursor all the way down to the bottom of my code. I knew immediately that it must be an IE bug, since it worked just fine in Firefox. However, it’s not good business practice to tell your supervisor to stop using inferior, though hugely popular software. Especially when anywhere between 50 and 75% of your public is using that same software.
So, I started searching the web. After several unsuccessful Google attempts, I came across a few decent articles on the subject. The most useful article came as somewhat of a surprise, since it began by only dealing with the fact that the “base” element could cause this problem, and the original post simply recommended deleting the “base” element from your style sheet.
I did, however, find a very useful, simple javascript solution in one of the comments.
The original article can be found here. The comment that provided the solution for me is here.
Just in case that article or that comment ever goes away, here is the solution that was provided:
<script type=”text/javascript” language=”javascript”>
function fixIEselectBug() {
document.body.style.height = document.documentElement.scrollHeight + ‘px’;
}
</script>
Once you put that javascript in the head of your document, or in your linked javascript file, all you need to do is add an onload event handler that will automatically load that function for you. From there, you should be homefree.
The original comment recommended hiding that script from non-IE browsers, but I have yet to figure out how you can effectively add a browser-specific onload event handler. Obviously, you can place the special IE comment tags in the head of your document to hide the function itself from non-IE browsers, but that does not seem to work within the onload event handler of your body tag, so it seems somewhat pointless to me.
2 Responses
An update to this blog entry:
I figured out how to trigger onload event handlers within conditional comments.
Rather than placing the onload event handler within your body tag, you simply add the following item to your javascript (provided your script is in the head of your document):
Voila. Put that inside your conditional comments, and you’re good to go. That way, Firefox (or any other non-IE browser) won’t have a fit about the fact that it’s trying to execute a non-existent script, and you can hide the script from all non-IE browsers.
Thank you so much. I used your code including the if onload event handler and everything works perfect. Thank you again.