Hi
I’ve noticed that by making websites with CSS it’s impossible to highlight text, for example if you want to copy and paste some text. Is there any reason for this or any way round it? Sitepoint is made with CSS but you can highlight the text here…
There may be a few reasons why you can’t highlight text when you are using css, but if done properly you can!
The most common reason for not being able to highlight text on a page is if you have one element overlapping the element containing the text. In this case you just need to change the z-indexes so that the element containing the text is on top.
Having said that, i was recently testing one of my sites on ie5 on the mac and i couldn’t highlight the text by clicking and dragging, but could if i double clicked or triple clicked!! I still haven’t figured out why as it works for every other browser on pc and mac.
Hi,
I notice that on webcredible that the text highlights from the bottom when you try to highlight a section. I’ve seen this problem also at csszengarden.com and when i was building a site a while back. It seems to happen when the text is inside a div that is positioned absolutely. I think you can correct it if you have another div inside the one positioned absolutely that is positioned in flow.
I think…
Thanks for the reply, doctornick. I’ve fiddled with the z-indexes but that doesn’t make a difference. Nothing’s overlapping on anything else so it can’t be that either. 
Basically, the problem isn’t that I can’t highlight the text (I can), but I can’t control how much of the text to highlight. When I try highlight a few words the entire middle section highlights and I can’t control it.
…and I’ve added in extra div’s, but no…
Hey Trenton,
I say ‘i think’ cos i got round it eventually by using position: relative; for the div. From looking at www.webcredible.co.uk i think you could easily position your main div without using absolute (that is, if you ARE using it 
). If you post your css i might be able to help.
Hi,
This is a known problem with ie in that text in absolutely placed elements acn’t be highlighted and copied correctly. Even nesting the text in a static div will not work if the parent is absolutely positioned.
You will need to use some other form of positioning if it is that important for you to have the text available for copy.
paul
Hi doctornick, it’s not actually for my website, but for one I’m workingo n right now. Here’s the CSS in case you’re interested (it’s quite long).
body {color:#000; background:#fff; font-size:80%; font-family:verdana,tahoma,helvetica,sans-serif; margin:20px 5px; padding:0}
img {border:0}
h1, h2 {font-size:1.4em; margin-bottom:0}
.skip {width:1px; height:1px; clear:both}
a {text-decoration:underline}
a:link {color:#00f}
a:visited {color:#909}
a:hover {color:#f00}
a:active {color:#f00}
form {margin:0}
/* Header */
#logo {height:40px; width:781px}
#ad {height:31px; width:781px; background:#000}
/* Content */
#body {width:780px; margin-left:auto; margin-right:auto; position:relative; top:0}
Content {position:absolute; top:90px; left:0; width:780px}
#margin-left-right {margin:0 150px}
.tag {margin-top:0.1em}
.blue {border-bottom:1px solid #000; clear:both}
.blue h2 {color:#fff; background:#4646C1 url(“images/kant_stor2.gif”) no-repeat right top; padding:2px 0 2px 5px; font-size:1em; width:214px; margin:0}
.three-col {width:155px; float:left; margin-top:0.3em; background:none}
/* Boxes with curved corners */
.left {background:url(“images/dot_white.gif”) repeat-y top left; margin-top:25px}
.top {background:url(“images/dot_white.gif”) repeat-x top left}
.bot {background:url(“images/dot_white.gif”) repeat-x bottom left}
.right {background:url(“images/dot_white.gif”) repeat-y top right}
.left-top {background:url(“images/corner_1white.gif”) no-repeat top left}
.left-bot {background:url(“images/corner_3white.gif”) no-repeat bottom left}
.right-top {background:url(“images/corner_2white.gif”) no-repeat top right}
.right-bot {background:url(“images/corner_4white.gif”) no-repeat bottom right}
.pad {font-size:0.85em; padding:0 10px; z-index:5}
/* Box content */
.pad h2 {padding-top:10px}
.pad div {padding:5px 0}
.pad .xtra-div {padding:10px 0; text-align:center; color:#fff}
.pad p {margin:0}
.title {font-size:1.15em; font-weight:bold}
.pad-top {padding:5px 10px 0}
.pad-left {padding-left:10px}
.bg {background:#e3e3ff; margin-top:0}
.bg2 {background:#c8c8e8}
.bg2-right {background:#c8c8e8; text-align:right}
.smaller {font-size:0.85em}
.smaller div {padding:5px}
/* Splits into two columns */
#two-thirds {width:300px; float:left; margin-right:30px}
#one-third {width:150px; float:left; text-align:center}
#one-third p {text-align:left}
.user-survey {width:128px; height:22px; padding-top:10px}
/* Bottom box */
#smallprint {border-top:1px solid #000}
.info {width:106px; height:30px; float:right; padding-left:10px}
/* Left column */
#left-col {position:absolute; top:65px; left:0; width:135px}
/* Boxes in left column */
.left2 {background:url(“images/dot_white.gif”) repeat-y top left #dfdfff; margin-top:25px}
.top2 {background:url(“images/dot_white.gif”) repeat-x top left}
.bot2 {background:url(“images/dot_white.gif”) repeat-x bottom left}
.right2 {background:url(“images/dot_white.gif”) repeat-y top right}
.left-top2 {background:url(“images/corner_1.gif”) no-repeat top left}
.left-bot2 {background:url(“images/corner_3.gif”) no-repeat bottom left}
.right-top2 {background:url(“images/corner_2.gif”) no-repeat top right}
.right-bot2 {background:url(“images/corner_4.gif”) no-repeat bottom right}
.pad2 {font-size:0.8em; padding:0 10px; font-weight:bold}
.pad2 p {padding-top:10px}
.members {width:113px; height:22px}
.rss {width:34px; height:14px}
/* Right column */
#right-col {position:absolute; top:90px; left:650px; width:130px}
.black {color:#fff; background:#000 url(“images/kant_stor.gif”) no-repeat right top; padding:2px 0 2px 5px; font-size:1em; width:125px; margin:0}
.right-box {border:1px #000 solid; padding:5px; font-size:0.85em}
.mag {width:80px; height:90px}
As mentioned in my post above, you have absolute elements in that css and any text that falls within those elements will not be able to be highlighted in IE.
Is there a specific reason you want to copy and paste text? If so you will need to take those elements out of the absolutely placed elements and position them otherwise.
As you haven’t provided any html its impossible to see if this is possible with your layout.
I see you have this style :
#content {position:absolute; top:90px; left:0; width:780px}
I assume all your content is going inside this element so you could position this element using margin-top:90px; instead of absolute positioning. As mentioned above this does depend on the construct of your page and the html that goes with it.
Paul
Hi,
I’ve had a search around and it seems that the bug only affects ie6. There are two documented workarounds for it, one is to make ie6 works in quirks mode and the other is to use some rather ugly javascript. These are both pretty bad ideas so the best way will be just to use positioning other than absolute.
It’s pretty hard to understand your code without the html too Tho i can see that you are using absolute positioning for left, right and content divs which means that if you want to be able to highlight text in them all then you are going to have to change it around a little. If you post your html then i’ll see what i can do to help.
Good find
Quirks mode can easily be forced upon Ie by using the xml prologue when using the xhtml doctype.
This may be the easiest solution and is perfectly valid code (although ie does revert to quirks mode) but if the box model is avoided and the page coded correctly then the solution will work
<?xml version=“1.0” encoding=“iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
</head>
<body>
</body>
</html>
Paul
Guys, thanks for all your help. It’s all fixed and working perfectly.