Z-indexed div sitting below 0 in FF only

programming web dev
1

I have a div with a PNG graphic with a z-index: 20 sitting below a div with z-index: 0 in FF only. The 0 div holds a background image

  $(function(){
                      $('.meerkat').meerkat({
                      background: 'url(\'vw0910_940x90.gif\') repeat-x left top',

Locally the positioning is perfect. It is only when this code is used in an ad serving environment to insert it onto a page that the close png displays below the meerkat div GIF or JPG. The .dont-show div which holds text & has a z-index of 10 is sitting above the meerkat background image.

Doctype for those pages is

#meerkat-wrapper {
                         width: 940px;
                           margin: 0 auto;

                        }
                        .close-meerkat {
                                  position: absolute;
                                  display: block;
                                  height: 18px;
                                  width: 18px;
                                  background: url('close-x.png') no-repeat 0 0;
                                  cursor: pointer;
                                  text-indent: -9000px;
                                  z-index: 20;
                        }

                        .dont-show {

                                  position: absolute;
                                  display: block;
                                  height: 18px;
                                  width: 100px;
                                  font-family: arial, sans-serif;
                                  font-size:0.675em;
                                  cursor: pointer;
                                  z-index: 10;
                                  color: #FFF;
                        }

                                a.dont-show:hover {color:#FFF;}
                     .meerkat {
                            position: relative;
                            display: none;
                            z-index: 5;

                        }
                        
                        a.click-through 
                        {
                        display: block;
                        position: absolute;
                        top: 1px;
                        left: 1px;
                        height: 75px; 
                        width: 700px;
                        z-index: 1; 
}
                       .pos-bot .close-meerkat {right: 2px; top: 2px;}
                                    
                     .pos-bot .dont-show {right: 2px; top: 78px;}

             </style>
             
             

           <script type="text/javascript" charset="utf-8">

                      $(function(){
                      $('.meerkat').meerkat({
                      background: 'url(\'vw0910_940x90.gif\') repeat-x left top',
                      height: '90px',
                      width: '940px',
                      position: 'bottom',
                      close: '.close-meerkat',
                      dontShowAgain: '.dont-show',
                      animationIn: 'fade',
                      animationSpeed: 1000,
                      removeCookie: '.reset'
                      }).addClass('pos-bot');
                     $('#bottom').click(function(){
                     $('.meerkat').destroyMeerkat();
                     $('.meerkat').meerkat({
                     height: '90px',
                     width: '940px',
                     position: 'bottom',
                     close: '.close-meerkat',
                     dontShowAgain: '.dont-show',
                     animationIn: 'fade',        
                      animationSpeed: 1000,
                     removeCookie: '.reset'
                     }).removeClass('pos-bot');
                     $('.code').hide();
                     $('.bottom_').show();
                     return false;
                                 });

                             });
        </script>


            <div id="meerkat-wrapper">
    
<div class="meerkat">
<a href="_ADCLICK_" class="click-through" target="_blank"></a>
       <a href="#" class="close-meerkat">close</a>
                <a class="dont-show">Don't Show Again</a>   

          </div>
                 </div>