Firefox and DHTML Window Script

[Wildfire563]

1) Script Title: DHTML Window

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

3) Describe problem:
I'm using the DHTML Window Script on my page, and it works quite well in IE6. I like it because it allows the user to see information without leaving the page they are on. Unfortunately, in Firefox, the relationship between the window and its borders is all messed up. The window is showing up way to the left, and it appears the image for the side borders is not showing up.

Any clues on a fix for this?

Thanks,

Thomas

http://www.flyingscool.com and select many of the buttons across the top, like About/About.

P.S. I'm having what may be a related problem as well in that the values I am choosing for padding in cells are working differently in IE6 vs. Firefox, so that the positioning of text within a cell is screwed up w/respect to the background graphic of the cell in Firefox. Any clues on that? http://www.flyingscool.com/FC_eLearning.htm on the Welcome tab.

[Wildfire563]

Oh, I've also found that font colors aren't changing per the CSS specification, either. Did I do something wrong? When hovering over a tab, the font is supposed to change to a whitish color. Works fine in IE6, doesn't work with Firefox. Any thoughts on this?

http:/www.flyingscool.com/tabcontent.css

[Wildfire563]

I've done some more debugging. I put this in a long time ago and had forgotten how it works. I combined the script with a background script I had basically developed code I got from http://www.alistapart.com/articles/customcorners/ and http://www.vertexwerks.com/tests/sidebox/.

My relevant Header data looks like this:

		<style type="text/css">
		<!--
		/* Show only to IE PC \*/
		* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

		.boxbar {
			background: url('images/Edge2_bar.gif') no-repeat bottom left;
			margin: 0;
			padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px
		}
		.boxbody {
			background: url('images/Edge2_body.gif') no-repeat bottom left;
			margin: 0;
			padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px
		}
		.widthlessbox {
			margin: 0 25%; /* NO WIDTH! Opens up a world of possibilities! */
			background: url(sbbody-r.gif) no-repeat bottom right;
			font-size: 100%;
		}

		-->
		</style>

<script>

//DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, documentation, and terms of usage,
//Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm

var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var toppos,leftpos
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

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

function loadwindow(url,width,height,leftpos,toppos){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left=leftpos+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+toppos+"px" : iecompattest().scrollTop*1+toppos+"px"
document.getElementById("cframe").src=url
}
}

function closeit(){
document.getElementById("dwindow").style.display="none"
}

</script>

And the body code looks like:

<div id="dwindow" style="position:absolute;background-color:transparent;cursor:hand;left:210px;top:140px;display:none" onSelectStart="return false">
<div align="left" ><img src="images/Edge2_top.gif" width="594" height="12"></div>
<div align="left" style="background-color:rgb(222,222,222)"><img src="images/Edge2_bar.gif" onClick="closeit()" width="594" height="14"></div>
<div id="dwindowcontent" style="height:100%" class=boxbody>
<iframe id="cframe" src="" width=550 height=100% hspace=22 frameborder="0"></iframe>
</div>
<div align="left" ><img src="images/Edge2_bottom.gif" width="594" height="12"></div>
</div>

I have no idea why I am not using the CSS code for the classes. Most likely because I didn't know what I was doing.

How do I modify this code so it is compatible with both IE and Firefox, and NS for that matter? I don't know how to check for the various browsers, nor do I understand why they react differently to the code.

Thanks,

Thomas
www.flyingscool.com

[Wildfire563]

Ok, I found an issue. In IE6 the iframe line

<iframe id="cframe" src="" width=550 height=100% hspace=22 frameborder="0"></iframe>

doesn't work in FF. So I changed it to

<iframe id="cframe" src="" width="550px" height="100%" frameborder="0" style="position:relative;left: 22px"></iframe>

Now, both IE and FF show the same thing. Problem is, with the old way, the image I was using as an outside border of the iframe, which used to show the whole image and showed the borders on the outside of both the left and right sides of the iframe, now only shows the left side of the image, and not the part on the right border of thei iframe (why???).

To fix it, I created a right side image, like so

<iframe id="cframe" src="" width="550px" height="760px" frameborder="0" style="position:relative;left: 22px"></iframe>
<img src=images/Edge2_right.gif style="position: relative;left: 572px;bottom: 760px"></div>

I had to add the position because in IE, it ended up below the frame. This worked fine for FF. Unfortunately, for IE6, I had to make one more change. The image for the bottom was still below the frame by the length of the image on the right. So I had to position it as well.:

<div align=left style="position:absolute;top:786"><img src="images/Edge2_bottom.gif" width="594px" height="12px"></div>

Well, it seems to work now. Think I'll look for a cleaner way to accomplish this, however.