HTML Double Click Selection Oddity

Question

I didn't post this on DocType because it's not really a design thing, the visual representation isn't my problem, the behaviour is. I'm sorry if this is misplaced but I don't feel it's a designer issue.

The following DOM:

<ul style="overflow: hidden;">
   <li style="float: left;"><strong>SKU:</strong>123123</li>
   <li style="float: left;"><strong>ILC:</strong>asdasdasdasd</li>
</ul>

Or

<div style="overflow: hidden;">
   <div style="float: left; width: 49%"><strong>SKU:</strong>123123</div>
   <div style="margin-left: 50%; width: auto;"><strong>ILC:</strong>asdasdasdasd</div>
</div>

Or

<p>
   <span><strong>SKU:</strong>123123</span>
   <span><strong>ILC:</strong>asdasdasdasd</span>
</p>

All present me an odd problem in

• IE 6
• IE 7
• Firefox 3.x
• Chrome

But not in

• IE 8

When you double click '123123' after 'SKU:', it selects '123123' AND 'ILC:' from the next dom element.

Take any text on this page (here in SO), double click a word, it only selects THAT WORD, even in the middle of a paragraph. These examples have dom elements closing them, anyone know why this is happening.

My fellow employees use the 'double click' mechanism to select the relevant product ID's to do their job, and this dosen't make sense to me what soever.

Answer 1

I had the same problem. If you put a space before the closing tag of your li that should fix it.

<ul style="overflow: hidden;">
    <li style="float: left;"><strong>SKU:</strong>123123 </li>
    <li style="float: left;"><strong>ILC:</strong>asdasdasdasd </li>
</ul>

Answer 2

If you put a non-breaking space (  or \u00A0) or just a empty space (" ") between each span, it will separate the words and prevent the double-click selection from spilling into adjacent spans.

If you don't want to see a visible space, use a zero-width space (​ or \u200B).​​​