473,734 Members | 2,211 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

space between top of browser or frame and document body

Is there any way to control the space between top of browser or frame
and document body?

What I have is this: There is a simple file test1.html, and file
test.html that displays test1.html in an iframe. On the iframe I set
marginheight and marginwidth to zero. But there is one line of blank
space between the top border of the iframe and the first line of
text. However, the iframe's content document's body's offsetHeight
gives the height without considering this extra space between the top
margin of the iframe and the body. As a result, when I set the
iframe's height to the offsetHeight through Javascript, it is not big
enough but one line. This is on Mozilla 2.0.

test1.html ==>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test1</title>
</head>

<body>
<p>Here is some text. Here is some text. Here is some text. Here is
some text. Here is some text. Here is some text. Here is some text.
Here is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here is
some text. Here is some text. Here is some text. Here is some text.
Here is some text. Here is some text. Here is some text. Here is some
text. END.</p>
</body>

</html>

test.html ==>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<script type="text/javascript">
function changeFrameCont ents(newurl) {
var myframe = document.getEle mentById('myfra me');
myframe.src = newurl;
}
</script>
<script type="text/javascript">
function myframeFullHeig ht() {
var frame = document.getEle mentById('myfra me'); // iframe
var frameContent = frame.contentDo cument;
var frameContentBod y = frameContent.ge tElementsByTagN ame("body")
[0];
var height = frameContentBod y.offsetHeight;
alert(height);
frame.height = height;
}
</script>
</head>

<body>
<h1>Heading</h1>
<iframe id="myframe" frameborder="1" scrolling="no"
marginheight="-10" marginwidth="0" src="test1.html "
style="display: block; margin-bottom:3em" onload="myframe FullHeight()">
</iframe>
<input type="button" value="test1"
onclick="change FrameContents(' test1.html');" />
<input type="button" value="test2"
onclick="change FrameContents(' test2.html');" />
<p/>
<input id="myinput" type="text" size="10" maxlength="10"
style="display: block"/>
<input type="button" value="resize" onclick="myfram eFullHeight()"/>
</body>

</html>
Sep 12 '08 #1
8 7205
re************* @yahoo.com wrote:
Is there any way to control the space between top of browser or frame
and document body?

What I have is this: There is a simple file test1.html, and file
test.html that displays test1.html in an iframe. On the iframe I set
marginheight and marginwidth to zero. But there is one line of blank
space between the top border of the iframe and the first line of
text. However, the iframe's content document's body's offsetHeight
gives the height without considering this extra space between the top
margin of the iframe and the body. As a result, when I set the
iframe's height to the offsetHeight through Javascript, it is not big
enough but one line. This is on Mozilla 2.0.
body { margin: 0; padding: 0; }

?
Sep 12 '08 #2
On Sep 12, 10:54 am, Harlan Messinger
<hmessinger.rem ovet...@comcast .netwrote:
body { margin: 0; padding: 0; }
Did not work. In my file test1.html I tried both

<body style="margin: 0; padding: 0;">

and

<style type="text/css">
body { margin: 0; padding: 0; }
</style>

Sep 12 '08 #3
On 2008-09-12, re************* @yahoo.com <re************ *@yahoo.comwrot e:
On Sep 12, 10:54 am, Harlan Messinger
<hmessinger.re movet...@comcas t.netwrote:
> body { margin: 0; padding: 0; }

Did not work. In my file test1.html I tried both

<body style="margin: 0; padding: 0;">

and

<style type="text/css">
body { margin: 0; padding: 0; }
</style>
I supposed you could try

html, body { margin: 0; padding: 0 }
Sep 13 '08 #4
On Sep 13, 2:38 am, Ben C <spams...@spam. eggswrote:
I supposed you could try

html, body { margin: 0; padding: 0 }
Still didn't work. Maybe the workaround is to add 64 to the offset
height, for example:

var height = frameContentBod y.offsetHeight + 64;
frame.height = height;

Sep 15 '08 #5
On Sep 15, 2:46 pm, "removeps-gro...@yahoo.co m" <removeps-
gro...@yahoo.co mwrote:
On Sep 13, 2:38 am, Ben C <spams...@spam. eggswrote:
I supposed you could try
html, body { margin: 0; padding: 0 }

Still didn't work. Maybe the workaround is to add 64 to the offset
height, for example:

var height = frameContentBod y.offsetHeight + 64;
frame.height = height;
Strange, when the child document, which in my case is test1.html, has
the DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

then the value of

var height = frame.contentWi ndow.document.b ody.scrollHeigh t + "px";

is 200. So after setting iframe.style.he ight = height, there is still
a vertical scrollbar because the vertical space is not big enough.

But if I remove the DOCTYPE, then the height is 216. There is no
vertical scrollbar. Most strange indeed!

Note that in either case -- with or without the DOCTYPE -- the value
of height is 200px when calculating it using the following method

var frameContent = frame.contentDo cument;
var frameContentBod y = frameContent.ge tElementsByTagN ame("body")
[0];
var height = frameContentBod y.offsetHeight;

Now if my child document has no DOCTYPE, it cannot be validated, so
maybe I can add a DOCTYPE, validate it, then remove the DOCTYPE
Sep 15 '08 #6
In article
<af************ *************** *******@s20g200 0prd.googlegrou ps.com>,
"re************ *@yahoo.com" <re************ *@yahoo.comwrot e:
On Sep 15, 2:46 pm, "removeps-gro...@yahoo.co m" <removeps-
gro...@yahoo.co mwrote:
On Sep 13, 2:38 am, Ben C <spams...@spam. eggswrote:
I supposed you could try
html, body { margin: 0; padding: 0 }
Still didn't work. Maybe the workaround is to add 64 to the offset
height, for example:

var height = frameContentBod y.offsetHeight + 64;
frame.height = height;

Strange, when the child document, which in my case is test1.html, has
the DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

then the value of

var height = frame.contentWi ndow.document.b ody.scrollHeigh t + "px";

is 200. So after setting iframe.style.he ight = height, there is still
a vertical scrollbar because the vertical space is not big enough.

But if I remove the DOCTYPE, then the height is 216. There is no
vertical scrollbar. Most strange indeed!
Just out of curiosity, what happens if you use the HTML 4 Strict
DocType instead? There has been much discussion here in the past
about why XHTML 1.0 Transitional should be avoided; I'd be interested
to know if this is yet another reason.
Sep 16 '08 #7
On Sep 16, 5:26 am, David Stone <no.em...@domai n.invalidwrote:
<af570c89-8270-449e-a056-03040bf12...@s2 0g2000prd.googl egroups.com>,
But if I remove the DOCTYPE, then the height is 216. There is no
vertical scrollbar. Most strange indeed!
Just out of curiosity, what happens if you use the HTML 4 Strict
DocType instead? There has been much discussion here in the past
about why XHTML 1.0 Transitional should be avoided; I'd be interested
to know if this is yet another reason.
WIth all the following 6 DOCTYPES the height is 200px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://
www.w3.org/TR/html4/frameset.dtd">

Only with no DOCTYPE is the height of the iframe 216px, which means no
vertical scrollbar.

But I ran into a problem with iframe. When I click a hyperlink in the
iframe, the browser appears to send a request to both the parent and
iframe. That is, when clicking a hyperlink in the iframe which is
test1.jsp, the server processes the parent page test.jsp again as well
as the frame test1.jsp. This is a problem for me as it means that JSF
bindings in the test.jsp page would get processed, and the page is
unnecessarily built. So I may use a div with AJAX instead, instead of
iframes.
Sep 16 '08 #8
In article
<5f************ *************** *******@25g2000 prz.googlegroup s.com>,
"re************ *@yahoo.com" <re************ *@yahoo.comwrot e:
On Sep 16, 5:26 am, David Stone <no.em...@domai n.invalidwrote:
<af570c89-8270-449e-a056-03040bf12...@s2 0g2000prd.googl egroups.com>,
But if I remove the DOCTYPE, then the height is 216. There is no
vertical scrollbar. Most strange indeed!
Just out of curiosity, what happens if you use the HTML 4 Strict
DocType instead? There has been much discussion here in the past
about why XHTML 1.0 Transitional should be avoided; I'd be interested
to know if this is yet another reason.

WIth all the following 6 DOCTYPES the height is 200px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://
www.w3.org/TR/html4/frameset.dtd">
Did the page validate using the W3C validator? Odd effects are likely
to occur if there is some problem with either the html or css
according to the started doctype etc.
>
Only with no DOCTYPE is the height of the iframe 216px, which means no
vertical scrollbar.

But I ran into a problem with iframe. When I click a hyperlink in the
iframe, the browser appears to send a request to both the parent and
iframe. That is, when clicking a hyperlink in the iframe which is
test1.jsp, the server processes the parent page test.jsp again as well
as the frame test1.jsp. This is a problem for me as it means that JSF
bindings in the test.jsp page would get processed, and the page is
unnecessarily built. So I may use a div with AJAX instead, instead of
iframes.
I was intrigued by a comment in the html spec, just after iframe,
which mentioned using <objectto embed one html file inside another.
I wonder if this would work better for you?
Sep 17 '08 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
3535
by: bayram guzer | last post by:
hi everybody, i have very strange error. i can not see some of the asp pages on my browser. when i look from view source, all the source is there but browser does not show anything, just an empty page. Does anybody have idea about this ?
12
9799
by: Javier | last post by:
Hello, I'm very new in this forum and as I have the following problem, the website is in http://new.vanara.com ---------------------------------------------------------------------------- -------------------------------------------- Here's how the site works: You should press a button in the rollover area in order to load a source file on an Iframe, this Iframe is actually hidden working as a Buffer. The body of this loaded Iframe is...
4
9248
by: Ray Schaeffer | last post by:
Hi, I've written a very simple test HTML/JS program where the JS code in one frame writes to a different frame with "parent.frame1.document.write(...". This seems to work ok with IE-6, but with NS-7, after the first write, the "loading" seems to loop forever and if you click on "stop", the write will not work anymore. Also in NS, if you push reload, the write will not work anymore. Both NS and IE seem to perform the write slowly, and in
3
10107
by: D. Alvarado | last post by:
Hello, I am trying to find the <TITLE> element of my document. Normally alert(document.title); works just fine, but when this statement is within a page that is a frame in a larger document, the above call always returns the title of the parent (container) page. Is it possible through JS to deduce the <TITLE> element of the current page, even if that page is a frame?
4
2349
by: Matthias Caspary | last post by:
Hi all, can anyone imagine why the following site shows up correctly in Mozilla Firefox 0.8 and Netscape 4.5, but not in IE6? In IE6, the "main" frame seems to have disappeared. ### <html> <head>
4
6015
by: Bernard | last post by:
Hi, I am suddenly getting Safari script errors with the following user agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/125.8 In a frameset scenario, the framesetting document (top) contains a
2
1540
by: Victor | last post by:
Hi I have a very strange problem for my page. I have writen a js to make sure my table's height is 100% for the browser's viewport. my code is just the following. This works fine for firefox and IE. but in netscape, i found there is some white space at the bottom of the page whose height is about 10- 20 pixal. and these white space cause the v-scrollbar appears. I have no idea what is wrong here. Can any one help me on this one. Cheers...
3
2855
by: rajarya | last post by:
Hi, I m designing a HTML page(index.html),here i have 2 frames,by defult both frames have index1.html and index2.html as their source . in first frame(index.html) ,i have some redio buttons,and a submmit button. so when I select one ption and click the submit button in the left side frame(or frame 1 or in index1.html) my right side frame should be reloded with a new html page as per the javascript method in main html page. but insted I...
0
8946
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8776
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9310
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9182
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6735
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4550
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4809
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3261
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2180
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.