Select text in web page

January 11, 2006 8:15 PM

What is it about some web sites that makes it very difficult to select and copy text?

An example of this behavior is here.

I have inspected the source of some of these sites, and most seem to use the DIV tag. But what about it leads the system to select the entirety of a block, or certain parts of a block, rather than the text selected by the mouse?

posted by yclipse to technology (14 comments total)

Using Firefox 1.5 on XP I'm not having any problem selecting or copying the text--what browser/OS are you talking about?
posted by camcgee at 8:19 PM on January 11, 2006

I can select any thing I want on that page, from a single letter, to double-clicking a word, to clicking and dragging over any type (Firefox.)

However, sometimes, divs can be positioned over each other or overlap, not to mention hidden, which can affect selection at times. Or so I've found in the past.
posted by juiceCake at 8:21 PM on January 11, 2006

It acts weirdly in IE, which probably has to do with the fact that most of the elements are positioned using CSS and their appearance on the page is not in order of their appearance in the markup.

So: file this one under IE brokenness.
posted by Firas at 8:23 PM on January 11, 2006

Selects fine for me in Safari, FWIW.
posted by spilon at 8:25 PM on January 11, 2006

Also using Firefox, also works fine for me. I don't know if anyone has told you this yet yclipse, but internet explorer doesn't do a lot of the things a web browser is supposed to do, like obey standards. For that matter, it also does a lot of things its not supposed to do, like install software on your system without asking, and yes, prevent you from right-clicking or highlighting text.
posted by tiamat at 8:39 PM on January 11, 2006

I am also able to select fine (Firefox 1.0.2, Win XP), but I see what you mean, I think - are you trying to select from the blank white area to the left of the column? (Like, are you starting your click & drag in that blank white area?)

Maybe you're having trouble because of that. Try starting at the bottom of the paragraph/end of the line you want to end with, or start it JUST AT the first letter you want to select, seems to help for me.
posted by AlisonM at 8:39 PM on January 11, 2006

1) See Firas's post.

2) Understand why the whole "layout with tables is evil, use CSS for everything!" argument may not always be a great one.

3) profit?


(firas is correct as to why selecting behaves annoyingly in IE... firefox does not have this same craptacular behavior, but I still use IE because I'm a web developer in my spare time, and it's what I must use, since it's what my audience will be using)..
posted by twiggy at 8:40 PM on January 11, 2006

I have run into problems with text selection in IE when the element is positioned (either absolute, relative, or fixed; as long as position is defined) and the line-height is declared as well. Firas is right, it's just another IE problem.
posted by charmston at 8:42 PM on January 11, 2006

Yeah, Juicecake is most correct. The html order vs screen order isn't really the issue here* -- IE just gets confused with overlapping DIVs in that it doesn't know which layer you're trying to select by dragging the mouse. The symptoms are that IE will select large areas rather than the few lines you were intending to select.

Specifically it's overlapping divs that are placed using absolute positioning or floats with negative margins. Eg, an absolute positioned div that's overlapping with another div that's just in the flow of the page won't cause a problem.

For a 3 column layout I usually absolute position my left and right columns, then leave the middle column in flow and use padding to place it further down the page. It's a bit of a hack but it's very cross-browser compatible.
posted by holloway at 10:24 PM on January 11, 2006

* natch, forgot to say that in everything I've seen that's the case, but I'd love to see some examples if I'm wrong
posted by holloway at 10:25 PM on January 11, 2006

yclipse, chalk it up to IE brokenness. IE seems most broken with respect to CSS. On preview, holloway beats me to it and I shall delete my inferior explanation.

twiggy: "my audience only uses IE" is a bad assumption. 55% of visits to my site last month were Moz/FF, 40% IE, 5% Safari/Opera. Admittedly that is partially due to some technical content and relatively web-savvy readers, but nevertheless. That's not to say you shouldn't be mindful of IE bugs in your page design but I certainly would not design for it as the primary client.
posted by polyglot at 10:53 PM on January 11, 2006

FYI, you can specify blocks that are not copyable in javascript.

For instance:

<input onfocus="this.blur();" value="Can't touch this" />

posted by Civil_Disobedient at 4:46 AM on January 12, 2006

I've run into this problem before. It's a bug in IE6, where any text inside a div that is styled with position:absolute can not be selected. It doesn't appear to affect any other browsers, or other versions of IE.
posted by clarissajoy at 8:23 AM on January 12, 2006

clarissajoy: That's not right (it's too broad a statement). There's no problem with position:absolute -- using that works and text can still be selected.
What causes the issue is overlapping DIVs.
posted by holloway at 2:34 PM on January 12, 2006