Base elements cause text selection problems in IE

I recently ran into one of the most bizarre Internet Explorer bugs yet. I was asking a colleague for help with a completely different IE problem when he said "Did you know that you can't select any text on this site in IE?". A quick test in IE confirmed this. Actually the problem wasn't that text was completely unselectable, just that it was very difficult and tricky to select.

Text selection problems aren't too unusual to run into with IE when you use absolute positioning, but in this case there wasn't any of that going on, so I didn't really know where to look for a fix. Since it took me a while to find the solution I thought I'd share it in case there are others banging their heads against this one.

It's quite easy to fix really: just remove the base element from the document. You are probably wondering what on earth a base element was doing in the code, and so am I. I sure didn't put it there, but for some reason the CMS we're using did.

We're using the latest version of EPiServer for this site, and it has a "search engine-friendly Web address" feature that seems great at first. I was really looking forward to finally being able to stop EPiServer from exposing page template names and adding a bunch of cryptic numbers to the end of URLs. But unfortunately the feature is implemented in a very strange way. I don't know whether ASP.Net, Microsoft IIS or developer ignorance is to blame, but there has to be a better way.

For some reason the search engine-friendly URL feature requires the addition of a base element in combination with a JavaScript that changes the action attribute of the search form for the built-in search engine to work. That obviously breaks the search function for people without JavaScript, which is completely unacceptable. And, as I now have found out, when a base element is used in a document containing text in floated elements, a IE bug that causes text to become more or less impossible to select is triggered.

The solution, as I mentioned earlier, is to get rid of the base element. For sites based on EPiServer that means either turning off the search engine-friendly URL feature or do what we did: do a bit of server side regexp filtering and on-the-fly rewriting to fix the search form's action attribute in an accessible way, with no need for either base elements or ugly JavaScript hacks.

I'm tired of us client-side developers always having to clean up the mess caused by back-end developers who think they know front-end coding.

Posted on August 8, 2006 in CSS