?
Solved

dropdown always on top in ie6

Posted on 2011-03-24
8
Medium Priority
?
408 Views
Last Modified: 2012-06-27

I cannot set the div to be on top of a dropdown in ie6. Works in other browser but not in ie6.

Z-order is not working.

Any ideas?
0
Comment
Question by:PagodNaUtak
  • 5
  • 2
8 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35205421
0
 
LVL 13

Expert Comment

by:stergium
ID: 35205429
hello.
use the z-index attribute and the zIndex property to change the stacking order of objects.
<img src="cone.jpg"
    alt="cone"
    style="position: absolute;
        top: 100px;
        left: 100px;
        z-index: 4">
<div style="position:absolute;
    top: 100px;
    left: 100px;
    color: red;
    background-color: #999966;
    font-weight:bold;
    z-index: 1">
...
</div>
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35205471
Hi stergium,

your try an example with a dropdown or a select input type. it will not work... in IE6...

The problem occurs only in dropdown.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35205516
IE6 sux. A div or ul with position:absolute. No matter how much you increase the value of z-index the select box (windowed element) will always remain on top most – yes only on a special browser, Internet Explorer 6. The reason is IE6 considers select element as windowed element and keeps it always on top layer.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35205546
Not sure why do you have to support IE6. Do people still use it?

Also, did you tried wrapping your div into another div and then giving it z-index? the link that i shared earlier seems to suggest that it works
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35205630
Actually that is the first thing that comes to my mind. unfortumately, yes, someone still using it and mostly our executives. I do not know the reason why they are still using it.
0
 
LVL 8

Accepted Solution

by:
PagodNaUtak earned 0 total points
ID: 35255490
Set the css display none to hide it and display inline to show it.
So that the dropdown will not be on top if the div is visible..
0
 
LVL 8

Author Closing Comment

by:PagodNaUtak
ID: 35312539
As stated in the comment
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

568 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question