Welcome to WebmasterWorld Guest from 23.20.230.24

Forum Moderators: not2easy

Message Too Old, No Replies

Text Highlighting in CSS Layouts

entire blocks get selected instead of the desired part

     
8:25 am on Feb 2, 2003 (gmt 0)

10+ Year Member



I've come across this issue not only with my site but with other sites using CSS layout only. When trying to select (highlight) parts of text I find that the whole text gets selected. I don't know how to put this better, dragging the mouse to the right to select letter by letter doesn't work, the whole block gets selected immediately. I have been wondering if it's got anything to do with divs having position:absolute. Does anyone know how to solve the problem as I imagine it must be annoying to my visitors.

Thanks

8:55 am on Feb 2, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmmm... Interesting stuff bluecorr.

I've not experienced it but, I know that an absolutely positioned div using right: 0px; or similar makes links and forms unclickable.

Can you give a very simplified snippet of code to demenstrate?

Nick

1:14 pm on Feb 2, 2003 (gmt 0)

10+ Year Member



I've noticed that too a couple of times... never really investigated further. I'm quite sure it's an IE bug though, don't remember it occurring on other browsers.
5:25 pm on Feb 2, 2003 (gmt 0)

10+ Year Member



<div class="text">
<p>text text text</p>
</div>

<div class="text1">
<p>text text text</p>
</div>

where

.text {
background-color: #FFFFFF;
margin-top: 335px;
padding: 5px;
border-right: 1px dotted #CCCCCC;
position: absolute;
width: 360px;
z-index: 3;
}

.text1 {
background-color: #FFFFFF;
border-left: 1px dotted #CCCCCC;
border-right: 1px dotted #CCCCCC;
margin: 335px 0px 0px 370px;
position: absolute;
width: 370px;
z-index: 3;
}

Basically what I have are 2 columns (each a div). The text1 shows an even stranger effect in IE. If you try to select something at about mid paragraph it automatically selects the previous half. Still this is just an example, I have other sites where I have:

<div class="content">
<p>text text text</p>
</div>

<div class="logo">
<img src="img.jpg" />
</div>

where

.content {
background: url("images/image.jpg") no-repeat 20% 27%;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}

.logo {
margin-left: 50%;
margin-top: 5%;
position: absolute;
z-index: 2;
}

I have noticed that as soon as I change the position:absolute to position:relative you can select text normally but that ruins the layout. I have tried using #id instead of .class but no change. I can sticky you the URL if you like.

I noticed the inability to click on some links or forms when you have two (partially or totally) overlapping divs and the links and forms are in a z-index:1 div and the other div is z-index:3 or higher.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month