# CSS issue IE7 vs. IE8 arghhhhhh!

**URL:** <https://forum.kirupa.com/t/css-issue-ie7-vs-ie8-arghhhhhh/317807>\
**Category:** web dev\
**Created:** [January 3, 2011, 7:12pm UTC](https://forum.kirupa.com/t/css-issue-ie7-vs-ie8-arghhhhhh/317807 "2011-01-03T19:12:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)\
**Post date:** [January 3, 2011, 7:12pm UTC](https://forum.kirupa.com/t/css-issue-ie7-vs-ie8-arghhhhhh/317807/1 "2011-01-03T19:12:50Z")

</div>

I have been asked to implement a browser bottom hugging panel & turned to Jarod Taylor’s meerkat/jquery plugin

[http://meerkat.jarodtaylor.com/how-to/basic-usage/comment-page-1/#comment-255](http://meerkat.jarodtaylor.com/how-to/basic-usage/comment-page-1/#comment-255)

Because the container div I am being forced to use is 728 px centered, & my panel is 940, I used #meerkat-wrapper {width: 940px; margin-left: -100px;

This works as planned in every browser tested except IE7. In IE7 the panel is no place visible, not even strectching my browser across 2 monitors, on the off chance that it has aligned itself -1000 pixels. I have to say, I was not expecting there to be such a difference between IE7 & IE8, & I am completely at a loss as to why.

PM me for a link where this can be seen live

This is the implementation

```auto
&lt;script src="http:[[COLOR=#0000ff]//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js[/COLOR]](http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
 &lt;script src="http://meerkat.jarodtaylor.com/wp-content/themes/meerkat-default/js/jquery.meerkat.1.3.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
           &lt;style type="text/css" media="screen"&gt;
                        #meerkat-wrapper {
       width: 940px;
          margin-left: -100px;
 
              }
                         .close-meerkat {
                                  position: absolute;
                                  display: block;
                                  height: 13px;
                                  width: 13px;
                                  background: url(http://meerkat.jarodtaylor.com/demo/images/close-x.png) no-repeat 0 0;
                                  cursor: pointer;
                                  text-indent: -9000px;
                                  z-index: 10000;
                        }
                        .dont-show {
                            position: absolute;
        display: block;
       height: 11px;
                            width: 70px; 
       background-color: #cccccc;        
        font-family: arial narrow, sans-serif;
        font-size:0.625em;
        text-decoration: none;
        cursor: pointer;
        z-index: 10;
                        } 
 
 
                     a.dont-show:hover {color:#FFF;}        
     .adsense {z-index: 5;}
                     .meerkat {
       position: relative;
                            display: none;
       z-index: 5;
                        }
 
    .pos-bot .adsense, {
    width: 940px;
    height: 90px;
    position: absolute;
    left: 0;
    margin-left: 0;
    }
 
    a.click-through 
      {
      display: block;
      position: absolute;
      top: 5px;
      right: 25px;
      height: 70px; 
      width: 880px;
      background: url("http://somedomain.com/spacer.gif") no-repeat 0 0; 
      z-index: 100; 
      }
                      .pos-bot .close-meerkat {right: 2px; top: 2px;}         
      .pos-bot .dont-show {right: 0px; top: 79px;}      
      .pos-bot .adsense {top: 1px;}
             &lt;/style&gt;
           &lt;script type="text/javascript" charset="utf-8"&gt;
                      $(function(){
       $('.meerkat').meerkat({

                      background: 'url(\
```