Text Selection Highlighting too much

Question

Text Selection Highlighting too much on either side because of padding.

http://jsfiddle.net/JamesKyle/pA7BJ/

How do I fix this using CSS? I've tried a bunch of different things, none of which seem to work. (i.e. trying to use margin and other properties).

I've run into this issue several times and have never been able to figure it out.

If someone could show me how to fix this and maybe explain how the text selection highlight is calculated, I would very much appreciate it.

It appears that this isn't occurring in Firefox/Opera (can't test IE), and it may be limited to webkit-based browsers.

SOLVED:

Add position: relative to any padded elements (this is likely a webkit bug).

http://jsfiddle.net/JamesKyle/ejfsM/

Samaritan

What browser? In Firefox 14 and IE9, I get a normal selection, ie, just the normal way of selecting the text. In Chrome latest, I get what your image shows. – Chariness

I believe the highlighting is handled by the browser. I'm guessing you are using Chrome. If you try the same thing with Firefox, you will notice that only the text is highlighted. – Insouciant

Okay well how do I make it consistent throughout browsers (including webkit)? – Samaritan

This is quite odd, I have the same problem in chrome too, it seems chrome highlights the entire width of the browser, even if you place another div inside your container with 100% width and height it still overflows this (even though it has no padding etc). Not sure of a solution to be honest. – Blueness

It could be a bug in Webkit. Opera 11.5 also doesn't have the issue, and I can't test Safari (which won't run on my computer, for some reason). – Chariness

Based on the solution, my understanding is that by setting the container's position to relative, the contents of the container will also be relative to the container instead of the body thus resulting in the desired effect. – Peg

Answer 1

This is strange. However, changing CSS position seems to work, e.g.:

div.sizing-container {
    padding: 75px;
    position: relative;
}

http://jsfiddle.net/LJLdW/

Don't know if that is possible in your situation.

Windproof

Certainly odd. Try it by setting it as you say, then resetting, and it still works. Try it on the h1 and the gap between the h1 and first p still has the problem: jsfiddle.net/pA7BJ/18 – Chariness

Answer 2

Changing the padding of div.sizing-container to 75px 0px 75px 0px would fix this issue. The highlight is so large because of the padding on this element.

Then you need to change add:

width: 93%;
padding-left: 3%;

To the body. And then add 10px padding to .sizing-container

That fixes it for me. Thats all I can say.

Fireboard