[thelist] z-index issues in ie6 and ie7

Chris Dorer cdorer at gmail.com
Thu Aug 16 17:27:14 CDT 2007


Ok.  So upon further digging, i found that a MUCH simpler search was to look
on google with the search term "z-index ie bug".  One page that REALLLLLLLLY
helped was:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

I then placed the element with z-index 5 in the same container as the
element with z-index 13.  I then made absolute positioning of the z-index:5
with finding the top and left x & y positions and multiplied them with -1.

Voila!!!!!

On 8/16/07, Chris Dorer <cdorer at gmail.com> wrote:
>
> List,
>
> Why when I use a table and style it with a z-index of 5 in FireFox it
> plays nicely and lies underneath a div dialog box that's a z-index of 13.
>
>
> HOWEVER, in ie the table craps out and has a commanding z-index layer that
> supersedes the dialog box's z-index of 13.
>
> What information can I provide you besides the following:
>
> function a(){
>     var heightOfDoc = $(document).height();
>     $("<table id='disablePage' " +
>         "style='z-index:5; display:none; position:absolute; top:0px;" +
>         "left:0px;' width='100%' height='" + heightOfDoc + "px'><td></td>"
> +
>         "</table>").prependTo("body");
> }
>
> function disablePage() {
>     // $("#disablePage").css("display", "block");
>     $("#disablePage").css("z-index", "5");
>     $("#disablePage").css("background-color", "red");
>     alert( $("#disablePage").css("z-index") );
> }
>
> function unDisablePage() {
>     $("#disablePage").css("display", "none");
> }
>
> Thanks for your tips,
>
> Chris
>
>



More information about the thelist mailing list