homepage Welcome to WebmasterWorld Guest from 50.17.7.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Text Highlighting in CSS Layouts
entire blocks get selected instead of the desired part
bluecorr




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

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

 

Nick_W




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

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

c3oc3o




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

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.

bluecorr




msg:1198877
 5:25 pm on Feb 2, 2003 (gmt 0)

<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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved