Forum Moderators: not2easy

Message Too Old, No Replies

IE6 Text Selection Bug

Possible fix...

         

Gendari

6:59 pm on Oct 26, 2004 (gmt 0)

10+ Year Member



Hey folks:

I am new to the Webmaster World forumns and I am sure you are all aware of the text selection problem. Currently I am designing a website and after reading about the standardization of XHTML and CSS, etc, I decided to go with a full CSS website.

While in the process of designing the news section for my website I realized that I could not select the scrollbar for it. This is when I learned about the text selection bug. I tried to move everything to relative positioning but that did not work nor did I have the patience to re-design the site to make it work.

Lastly, I've tried all the Javascript hacks, etc, to no avail without ruining my site design.

Now, this is the part where I get excited. I have come to believe that the IE6 bug may not be a bug at all. You have to think of the way that your elements are designed, which is what I did, and how do they exactly play on a 3-dimesional basis. Using my website as an example, it's clear to see that one of the border elements cover the length of the page:

html, body
{
background-color: black;
padding : 0px;
margin : 0px;
/* This makes the body parent element the size of the browser window */
height: 100%;
width: 100%;
overflow: hidden;
}

#backgroundright
{
display: block;
background-color: transparent;
background-image: url(Images/backgroundborder.png);
background-repeat: repeat-y;
background-position: top right;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}

The problem I was facing was that based on the order and z-indexs of these items I was essentially clicking on a transparent div that was on-top of my news div on a 3-dimensional level.

One of the things to keep in mind was that before I assigned a z-index to all my elements, I only had them on the ones that would overlap. If you don't have Z-Index assigned to your elements, perhaps think of the order you want your elements to stack (especially for dynamic purposes) and assign them values. Having only some elements with a z-index moved all the ones that did not have it automatically to the bottom of the 3-dimensional stack.

So what I did to fix my selection problem was that I moved my news elements to the top of the stack with higher z-index values then the other elements.

Last thing I want to mention is that I have my site set up so that certain elements adjust with the size of the window. I have the liberty to assign the highest z-index values to my NEWS element because it will never overlap with my LEFT-Vertical navigation bar. Eww, that was confusing, here is what I mean:

¦-----¦-¦---------------------¦
¦-----¦-¦-CONTENT-----------¦
¦-NAV¦-¦-Pos: ABSOLUTE-----¦
¦-----¦-¦-Left: width of Nav---¦
¦-----¦-¦---------------------¦

This may not work for everyone, but I'm glad it's working for me. ;)

SuzyUK

1:10 pm on Oct 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Gendari - Welcome to WebmasterWorld

It does feel good when you start to 'see' the invisible z-index :)

thanks for posting your solution

Suzy