Link Floatie Script - display issues with FF and IE8

1) Script Title: Link Floatie Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkfloaties.htm

3) Describe problem: I am having some display issues with this script in both Firefox and Internet Explorer. Unfortunately, I'm unable to post links to the website as it is currently in QA. However, I attached screenshots to illustrate the issues that I'm having.

In FF, the floatie is too far to the left.
Attachment 4938

In IE, the floatie is too high and cuts off some of the text above it.
Attachment 4939

Of course, any issue that I'm having in one browser is not occurring in the other.

Any help you could provide would be much appreciated.

I am not sure much can be offered in the way of help untill you post the page code for people to look at.

Can you do that?copy and paste the code for this page for someone to work with?

Unfortunately, I can't include all of the code because I'm getting errors from DD that I've entered too many characters.

Here is a sample of what each floatie contains - we have one for each state and territory:

Code:

---

//Washington
floattext[52]='<div class="spacer2">&nbsp;</div><div class="regulator"><div class="commish_pic"><img src="images/members_washington.jpg" alt="Mike Kreidler - Commissioner"></div><div class="commish_info"><b>Mike Kreidler</b><br>Commissioner, Washington State Office of the Insurance Commissioner</div></div>'

---

And this is the rest of the script:

Code:

---

var floatiewidth="710px" //default width of floatie in px
var floatieheight="110px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="#FFF" //default bgcolor of floatie
var fadespeed=50 //speed of fade (5 or above). Smaller=faster.

var baseopacity=40
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset (baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 1)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="10px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
//new code to position in Ie  - false condition for firefox and other browsers
if (navigator.userAgent.indexOf('MSIE') !=-1){floatobj.style.left=(winWidth/2)-280 /*(larger number moves floating box left)*/ +"px";floatobj.style.top=99 /*(larger number moves floating box down)*/+"px"}
        else {floatobj.style.left=(winWidth/2)-280+"px";floatobj.style.top=97+"px"}
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

---

Sorry for the multiple posts - just trying to post the code but keep running into character limits.

This is the CSS that is on the HTML page with the floatie.

Code:

---

<style type="text/css">
<!--
body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 10px;
}
td img {
        display: block;
}
.style23 {
        font-size: 8pt
}
.style24 {
        font-size: 10pt
}
.white_text {
        color: #FFF;
        padding-top: 0px;
        margin-top: 19px;
        font-size: 10pt;
}
#dhtmlfloatie {
        position: fixed;
        left: -900px;
        left: -900px;
        filter:alpha(opacity=10);
        -moz-opacity:50;
        padding: 0px;
        margin: auto;
        z-index: 100;
        background-image: url(images/ar_map_popup.jpg);
        font-size: 8pt;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #FFF;
        text-align: center;
}
.nav a:hover{
        font: 9px Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-decoration: underline;
        color: #FFF;
}
a:hover{
        font: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-decoration: underline;
        color: #003366;
}
a {
        font: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-decoration: none;
        color: #003366;
}
.nav a{
        font: 9px Arial, Helvetica, sans-serif;font-weight: bold;
        text-decoration: none;
        color: #003366;
}
.regulator {
        float: left;
        width: 325px;
        margin: 15px 0px 0px 0px;
}
div#dhtmlfloatie img {
        padding: 0px;
        margin: 0px;
}
.styleGrayDivider {
        color: #999999
}
.commish_pic {
        text-align:center;
        margin: 0px 0px;
        padding: 2px;
        margin-top: 0px;
        float: left;
        width: 100px;
}
.past_member {
        float:left;
        background-color:#FFF;
        font-size: 10pt;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        border: none;
        text-align: left;
        width: 230px;
        margin: 2px 2px 0px 2px;
        height: 100%;
        clear: right;
        font-weight: bold;
}
.commish_info {
        float:left;
        background-color:#FFF;
        font-size: 9pt;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        border: none;
        text-align: left;
        line-height: 1.2em;
        width: 200px;
        margin: 0px 2px 2px 2px;
        height: 100%;
}
.style25 {
        font-size: 14pt;
        font-weight: bold;
}
.style27 {
        font-weight: bold
}
.spacer2 {
        width: 50px;
        float: left;
}
.spacer1 {
        width: 50px;
        float: left;
}
-->
</style>

---

In case anyone else needed the info, here is the part of the code where you can change the position of the floatie:

Code:

---

//new code to position in Ie  - false condition for firefox and other browsers
if (navigator.userAgent.indexOf('MSIE') !=-1){floatobj.style.left=(winWidth/2)-280 /*(larger number moves floating box left)*/ +"px";floatobj.style.top=99 /*(larger number moves floating box down)*/+"px"}
        else {floatobj.style.left=(winWidth/2)-280+"px";floatobj.style.top=97+"px"}
slowhigh(floatobj)
}

---