www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE8+ CSS z-index (or focus?) issue

  1. #1
    Join Date
    Dec 2005
    Posts
    2,984

    IE8+ CSS z-index (or focus?) issue

    This is driving me insane, it appears to be a bug in modern IE versions that hasn't been fixed yet. I saw "appears" because I (and other major browser vendors) may be misinterpreting the spec. This is why I have:

    Code:
    <div class="instant">
      <input type="text" class="suggestion">
      <input type="text" class="search">
    </div>
    Code:
    .instant { position: relative; }
    .instant input { position: absolute; top:0; left:0; z-index: 2; color: #000;}
    .instant input.suggestion { z-index: -1; color: silver;}
    The problem I am having is that when I click on the input element visible on the screen (which should mean I am clicking on the .search input element), when I start typing the text is appearing in the .suggestion input element.

    This may not be so much a z-index issue as an improper focus issue. If anybody has come across this bug before, I'm dying for a solution that doesn't involve hacks with JS (e.g. when .suggestion is focused on, focus on .search).

    Thanks

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by aj_nsc View Post
    The problem I am having is that when I click on the input element visible on the screen (which should mean I am clicking on the .search input element), when I start typing the text is appearing in the .suggestion input element.
    I can not confirm that bug. Or maybe I did not understand where is that bug to be found.

    How did you find out that the text appears on the .suggestion class element? For me, in all the browsers I have tested your code (IE7, IE8, IE9, FF 7, Chrome 15, Opera 11 / Win7 , the entered text is black, that means the value is written in the .search class element, not in the .suggestion

    Moreover, when I tested using JavaScript, like:
    Code:
      <input type="text" class="suggestion" onfocus="alert(this.className)">
      <input type="text" class="search" onfocus="alert(this.className)">
    The alert is always, as expected: search, in all the browsers.
    Last edited by Kor; 11-09-2011 at 08:47 AM.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    Thanks Kor, for pointing that out, I apparently left out a very important part of the CSS that caused the problem, here it is:

    Code:
    			.instant { position: relative; }
    			.instant input { position: absolute; top:0; left:0; z-index: 2; color: #000; background: transparent;}
    			.instant input.suggestion { z-index: -1; color: silver; background: #fff;}
    Now you'll see that when you start typing, the text is silver. For some reason, IE 'focuses-through' input elements with a transparent background.

    Can you confirm? Appears like a major bug to me that is still showing itself in ppIE10

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles