If you are unable to select a block of text in IE 6...

  • Article

We hit an interesting conundrum yesterday which had me stumped for a while; an erstwhile colleague solved the problem in the end and I thought I'd just share it in case anybody else runs into this.

One of the test users on the ASP.NET 2.0 web site we are developing complained that on one page, they were unable to use the mouse to select a block of informative text we had put there (in order to cut and paste it for use elsewhere). It was possible to select a wider amount of the page but not a specific paragraph, rather negating the usefulness of the information!

I tried the same exercise in the latest versions of Firefox, Opera and beta 2 of IE 7, and all worked perfectly. Only IE 6 had this issue. I was even able to do a file save as... and save the file as a "Web Archive" (.mht) file (which is like a standard windows help file, and very useful for capturing an entire, single web page for transportation if you ever need to) and reproduce the problem in order to share it with others via email.

I initially put it down as a bug in IE 6 that is evidently fixed in the builds of IE 7 I was trying it with but waiting for this "bug" to be fixed obviously wasn't a very useful fix for my Customer.

Fortunately, one of my team saw what was causing the problem with this particular page - the CSS Styles happened to be such that one section of the page was in fact, technically, placed over the top of the particular block of text in question. This was not apparent from the page of course; which looked normal - but nonetheless, this was the case. So in effect IE 6 was not sure which element the user intended to be selected as one was beneath the other, and thus selected none.

We fixed the problem by changing the style of the overlapping item so that it simply didn't overlap any more. This meant moving from nice style sheet layouts using things like "float" to arrange things correctly, to old-fashioned layouts using borderless tables to make sure columns lined up the way they should. Problem solved. :-)