Pop up box in differnt locations across browers

[lizzielou]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: The pop up box of content is appearing in different places in different browsers. I have not changed "position:absolute" but when I try to add "top" and "left" amounts, there is no change. If I add "margin" amounts, I can shift the box, but it is not consistent across browsers. On a Mac, in FF the box is just below the logo (perfect), in Safari and Chrome, the box is over the Stanford logo and a little to the left.

The page is: stowecommunications.com/test/experience.html and the pop-up happens when you click on the Stanford University logo.

Is there a way to code for the different browsers? Or some way to specify the position of the pop up box?

Here is my code on the div with the pop up content:
<div id="subcontent2" style="position:absolute; visibility: hidden; background-color: #fff; border:#C0C0C0 medium solid; width: 400px; height: 140px; padding: 10px;top: 100px;">

It is positioned "left-bottom" in the java script.

Many thanks in advance for any suggestions!

[Beverleyh]

You can target Safari and Chrome specifically in CSS: http://paulirish.com/2009/browser-specific-css-hacks/

[vwphillips]

try these changes in red


show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
subobj.style.visibility="hidden"
return
}
var p=this.pos(anchorobj);
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=p[0] + horizontaloffset + "px"
subobj.style.top=p[1]+verticaloffset+"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.style.visibility="visible"
subobj.startTime=new Date().getTime()
subobj.contentheight=parseInt(subobj.offsetHeight)
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

[jscheuer1]

If the problem is what I think it is, you just need to make the trigger display: inline-block:


<a style="display: inline-block;" href="http://www.stowecommunications.com/test/experience.html" id="centeroceansolutions" rel="subcontent2"><img src="images/stanford-logo.png" alt="Stanford University logo" width="190" height="88" border="0" /><a/>

[lizzielou]

Thanks, all! I will try these suggestions and report back!

[lizzielou]

Ok, it's fixed! I moved the pop-up div outside of the wrapper div, just because that makes more sense anyway. But what fixed it is adding style="display: inline-block;" to the anchor link. I love it when it's so simple! Many thanks!