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
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
<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"></script>
<script src="http://meerkat.jarodtaylor.com/wp-content/themes/meerkat-default/js/jquery.meerkat.1.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#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;}
</style>
<script type="text/javascript" charset="utf-8">
$(function(){
$('.meerkat').meerkat({
background: 'url(\