Hi -
I have a pop-up iframe that is being styled by CSS settings in the javascripting.
var boxdiv = "";
var contents = "";
function buildBox(){
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', 'container,');
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.backgroundColor = '#fff';
contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = 'no';
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
var close = document.createElement('div');
close.style.display = 'block';
close.setAttribute('align','right');
close.style.cursor = 'pointer';
close.setAttribute('margin', 'inherit');
close.setAttribute('width', 'inherit');
close.setAttribute ('padding', 'inherit');
close.style.backgroundColor = '#fff';
close.style.paddingRight = '3px';
close.style.color = '#333333';
close.style.fontSize = '9pt';
close.style.borderRight = 'solid black 1px';
close.style.borderLeft = 'solid black 1px';
close.style.borderBottom = 'solid black 1px';
close.onclick = function(){boxdiv.style.visibility = 'hidden'}
var message = document.createTextNode('x Close');
close.appendChild(message);
boxdiv.appendChild(close);
boxdiv.style.visibility = 'hidden';
}
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box(an, width, height, nextDoc) {
var doc = nextDoc;
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.borderRight = 'solid 1px black';
boxdiv.style.borderLeft = 'solid 1px black';
boxdiv.style.borderTop = 'solid 1px black';
boxdiv.style.backgroundColor= '#fff';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
window.frames[0].location = doc;
boxdiv.style.visibility = 'visible';
move_box(an, boxdiv);
}
onload=buildBox;
In FF and IE, there is about a 2px separation between the iframe's contents and the "close" <div>. I've changed every setting I can think of to remedy this, but haven't been successful. (Visit <!-- m --><a class="postlink" href="http://kdla.ky.gov/onlinepubs/onepage/0206.htm">http://kdla.ky.gov/onlinepubs/onepage/0206.htm</a><!-- m --> to view the problem; the test link is in red.)
Could someone please look into this, and provide a solution?
Thanks,
KDLAMaybe being in Quirks mode could be the problem.What do you suggest I do to fix it? I believe both documents: the original HTML and the page being displayed in the IFRAME have strict DOCTYPES.A strict DTD, but with the XML declaration (<?xml version="1.0" encoding="iso-8859-1"?>) which puts IE into Quirks mode.I'd recommend you stick with HTML 4.01 strict for broadest compatibility.
I have a pop-up iframe that is being styled by CSS settings in the javascripting.
var boxdiv = "";
var contents = "";
function buildBox(){
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', 'container,');
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.backgroundColor = '#fff';
contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = 'no';
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
var close = document.createElement('div');
close.style.display = 'block';
close.setAttribute('align','right');
close.style.cursor = 'pointer';
close.setAttribute('margin', 'inherit');
close.setAttribute('width', 'inherit');
close.setAttribute ('padding', 'inherit');
close.style.backgroundColor = '#fff';
close.style.paddingRight = '3px';
close.style.color = '#333333';
close.style.fontSize = '9pt';
close.style.borderRight = 'solid black 1px';
close.style.borderLeft = 'solid black 1px';
close.style.borderBottom = 'solid black 1px';
close.onclick = function(){boxdiv.style.visibility = 'hidden'}
var message = document.createTextNode('x Close');
close.appendChild(message);
boxdiv.appendChild(close);
boxdiv.style.visibility = 'hidden';
}
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box(an, width, height, nextDoc) {
var doc = nextDoc;
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.borderRight = 'solid 1px black';
boxdiv.style.borderLeft = 'solid 1px black';
boxdiv.style.borderTop = 'solid 1px black';
boxdiv.style.backgroundColor= '#fff';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
window.frames[0].location = doc;
boxdiv.style.visibility = 'visible';
move_box(an, boxdiv);
}
onload=buildBox;
In FF and IE, there is about a 2px separation between the iframe's contents and the "close" <div>. I've changed every setting I can think of to remedy this, but haven't been successful. (Visit <!-- m --><a class="postlink" href="http://kdla.ky.gov/onlinepubs/onepage/0206.htm">http://kdla.ky.gov/onlinepubs/onepage/0206.htm</a><!-- m --> to view the problem; the test link is in red.)
Could someone please look into this, and provide a solution?
Thanks,
KDLAMaybe being in Quirks mode could be the problem.What do you suggest I do to fix it? I believe both documents: the original HTML and the page being displayed in the IFRAME have strict DOCTYPES.A strict DTD, but with the XML declaration (<?xml version="1.0" encoding="iso-8859-1"?>) which puts IE into Quirks mode.I'd recommend you stick with HTML 4.01 strict for broadest compatibility.