DHTML Window widget - can't get rid of border

[georgie_b]

1) Script Title: DHTML Window widget (v1.1)

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

3) Describe problem: I wasn't getting the close and minimise buttons showing on my window in Firefox. I've increased the padding in the .drag-handle part of the dhtmlwindow.css and the buttons show in Firebox.

But, arg, now there's a grey border on the top and left hand side of the box which I can't get rid of (showing in both IE and Firefox, but looking pretty ugly in IE).

I know that the answer is probably super easy, but I can't see the wood for the trees... my css is below, could anyone tell me what to do to remove that grey border on the top and left please? I'd be super grateful!

.dhtmlwindow{
position: absolute;
border-style: solid;
border-color: #F6F6F6;
border-width: 17px;
visibility: hidden;
background-color: #000000;
padding: 0px;
margin: 0px;
}

.drag-handle{ /*CSS for Drag Handle*/
z-index: 1;
padding: 8px;
text-indent: 3px;
font: bold 12px Arial;
background-color: #000000;
border-style: solid;
border-color: #000000;
border-width: 0px;
color: #000000;
cursor: move;
overflow: hidden;
width: auto;
margin: 0px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 1px;
top: 1px;
cursor: hand;
cursor: pointer;
padding: 0px;
margin: 0px;
}

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}


.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 0px solid black;
background-color: #000000;
color: black;
height: 150px;
padding: 0px;
border: 0px;
overflow: auto;
margin: 0px;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 0px solid black;
background-color: #000000;
padding: 0px;
margin: 0px;
height: 13px; /*height of resize image*/
}


.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
padding: 0px;
margin: 0px;
font-size: 0;
}

[jscheuer1]

Please post a link to the page on your site that contains the problematic code so we can check it out.

[georgie_b]

Sorry, there's an example of the problem here - http://www.frontlinecostello.com/video/video.html Please just click play video (not the video I'm going to use - that's not available yet, but just an idea).

Many many thanks )

[jscheuer1]

I believe that the border you are seeing is the generic iframe border. In the dhtmlwindow.js file you will find this line:

t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'

add (red):

t.contentarea.innerHTML='<iframe src="" frameborder="0" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'