This should be a quick one.
URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================
Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?
Thank you!
Christopher 4  2638 
Christopher wrote:
URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================
Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?
It isn't. It is below the bottom of my screen. I only see if after I
scroll down. (Is that what you meant?) That is a result of the
<BR><BR><BR> etc. What are those doing there? And why have you set
font-size in pixels?
--
Brian
follow the directions in my address to email me
Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:<R_*******************@rwcrnsc51.ops.asp.att. net>... Christopher wrote:
URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================
Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?
It isn't. It is below the bottom of my screen. I only see if after I
scroll down. (Is that what you meant?) That is a result of the
<BR><BR><BR> etc. What are those doing there?
I see now that I was not very clear in stating my problem. The 'div' has
'margin: 50px'. Thus I expect the initial containing block to be at least
50px bigger than it in every direction, if it can. This occurs fine on the
top, left, and right edges. However, the containing block does -not-
extend 50px -below- the 'div' as I would expect. This effect is only
noticable when you have to scroll, which is why I included all those
'<br>'s and made the font so big.
I realize now that this won't necessarily happen on a huge display. Sorry
I forgot to mention that. If you can't see what I'm talking about, shrink
your window to be no more than 600 pixels tall.
And why have you set
font-size in pixels?
For illustration purposes only, I assure you. I have no more intention of
using this exact style sheet in my final document than I have of using
this exact content!
Thanks,
Christopher
I'm just going to restate this problem another way. Consider the
following HTML documents:
#1: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
#2: http://cfa-www.harvard.edu/~cpilman/Stuff/flush2.html
I want to modify #1 so that it behaves like #2 in Opera 7, IE 6, and
Netscape 7 (for Win2K, if it makes a difference), in a window of
around 800 by 600 pixels. These UAs at this resolution are not the
*only* ones I care about, but it's what's currently giving me trouble.
The two documents appear similarly; the only difference is how far down
you can scroll. In #1, these browsers stop at the bottom of the bottom
border of the div. In #2, you can scroll past that. This is accomplished
in an (IMHO) artificial way by nesting one div inside another. I would
like to do it with a single div, positioned absolutely.
If this is impossible to do, I will accept that as an answer and use the
nested div solution.
Now, to respond to comments:
Lauri Raittila <la***@raittila.cjb.net> wrote in message
news:<MP************************@news.cis.dfn.de>. .. In article <d1**************************@posting.google.com >, Christopher
wrote: Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:<R_*******************@rwcrnsc51.ops.asp.att. net>... Christopher wrote:
>
> URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html Why is the bottom border of the 'div' element flush with the bottom
> of the window, at least in Netscape and Internet Explorer? And how do
> I make the window extent to include the bottom margin of the 'div'?
I see now that I was not very clear in stating my problem. The 'div' has
'margin: 50px'. Thus I expect the initial containing block to be at least
50px bigger than it in every direction, if it can.
Initial containing block is same size as viewport/whatever size it
pleases. It overflows.
What you mean is that you would want to be able to scroll canvas to
margins of elements, not just content and border. That is entirely User
agents business IIANM. And most browsers don't want to show scrollbars
for empty space
I may be misunderstanding you, but I don't think it's as simple as that.
For instance, these browsers will show scrollbars for empty space if it's
part of the margin of a statically positioned block element. They won't
do it for an absolutely positioned one, though, it seems.
This occurs fine on the top, left, and right edges.
Wou tried it on 100px wide screen? What browser? In Opera 7.2b1 same
happens on right side as on bottom.
I installed Opera, and the behavior is similar to that of Netscape and IE.
A 100-pixel window introduces more complications, because the viewport is
not as wide as the div's containing block, if I understand this correctly:
< http://www.w3.org/TR/REC-CSS2/visude...replaced-width >
So, if you don't mind, I'd like to get a grip on what's going on in the
case of a wider window before tackling that.
However, the containing block does -not-
extend 50px -below- the 'div' as I would expect.
Containing block only changes size on IE. (or it just looks thatway)
Try html, body {size:100%;border:1px solid red} and make it overflow, and
you see the size of initial containing block ( as size of body is then
same as initial containing blocks)
I did this. In both Opera and Netscape, the body block does not contain the
div, but the html block does. Are you sure the size attribute applies to
html and body? Anyway, I'm not sure what you're saying with this example.
Could you clarify?
Thread whitout conclusion in opera.beta, lots of stuff about initial
containing block, differences between CSS2 and 2.1, root elemnts etc.
Google if interested. "raittila root initial opera.beta" should find
thread.
I hope this helps.
Okay, I read that thread, and it does help somewhat. I think I understand
why now. I still don't know if there's a way around it.
Thank you,
Christopher
In article <d1*************************@posting.google.com> , Christopher
wrote: I'm just going to restate this problem another way. Consider the
following HTML documents:
#1: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
#2: http://cfa-www.harvard.edu/~cpilman/Stuff/flush2.html
I want to modify #1 so that it behaves like #2 in Opera 7, IE 6, and
Netscape 7 (for Win2K, if it makes a difference), in a window of
around 800 by 600 pixels.
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<Title>Get my feet off the ground</Title>
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid; }
</Style>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
Stripped all non necessary out. It started working...
These UAs at this resolution are not the
*only* ones I care about, but it's what's currently giving me trouble.
I would like to do it with a single div, positioned absolutely.
Why it needs to be positioned absolutely? That is key question. As it
works fine whitout it? Maybe we can start solving the real problem now?
If it doesn't need to work on IE, you don't even need the div BTW:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<Head><Title>Get my feet off the ground</Title>
<style type="text/css">
Body { font-size: 60px;margin: 50px; border: thick green solid;}
</style>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
Lauri Raittila <la***@raittila.cjb.net> wrote in message
news:<MP************************@news.cis.dfn.de>. ..
Initial containing block is same size as viewport/whatever size it
pleases. It overflows.
What you mean is that you would want to be able to scroll canvas to
margins of elements, not just content and border. That is entirely User
agents business IIANM. And most browsers don't want to show scrollbars
for empty space
I may be misunderstanding you, but I don't think it's as simple as that.
It sure isn't simple.
For instance, these browsers will show scrollbars for empty space if it's
part of the margin of a statically positioned block element. They won't
do it for an absolutely positioned one, though, it seems.
True. But it is still their decision. I don't know if it is good, but
IIRC spec says that they should provide scrolling mechanism for _content_
And since extra scrolling is usually not wanted, when it has been
easier/as easy to implement the way it is now, people implemented it that
way.
So, if you don't mind, I'd like to get a grip on what's going on in the
case of a wider window before tackling that.
The reason I pointed it out was that exactly same thing happens on right,
when canvas you use is wider than viewport. You only see this in so small
window, because text wraps downwards.
Containing block only changes size on IE. (or it just looks thatway)
Try html, body {size:100%;border:1px solid red} and make it overflow, and
you see the size of initial containing block ( as size of body is then
same as initial containing blocks)
I did this. In both Opera and Netscape, the body block does not contain the
div, but the html block does. Are you sure the size attribute applies to
html and body?
Yes, unless one of them is considered as initial containing block. Either
of them is the initial containing block is specified in spec, as well as
root element is contained in initial containing box. By CSS2. By CSS21,
initial containing box contains root element, and is the way Mozilla and
Opera understands that. (In other words, CSS2 is unclear about this)
Anyway, I'm not sure what you're saying with this example.
Could you clarify?
The point is that initial containing block isn't changing size by
content. No matter how much content, body and html elements are same size
when you specify them to be 100%, which means that they are 100% from
initial containing block. Since initial containing block is not any
element in document, you can't style it directyl, and therefore you can't
see it.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: sofakingfree |
last post by:
I could have sworn that Access 95/97 printed the query name as the
header when you print out queries. It doesn't do that with version
2003. Is there some option I'm missing? Any help would be...
|
by: blue875 |
last post by:
A tale of two queries:
One query looks like this, and runs fine. We'll call this the
"Customer1 query":
SELECT Customer1 overall.*,
IIf(IsNull(.),0,1) AS IsField,
IIf(IsNull(.),0,1) AS...
|
by: baroon |
last post by:
Please if you can help me by solving the following question by
>>using C++:
>>
>>One important function in word-processing system is typ
>>justification the alignment of words to both the left...
|
by: garryconn |
last post by:
I am trying to modify some CSS to shift some text over slightly and raise it up. Here is the HTML code and CSS I am working with:
-------------
THE HTML CODE
-------------
<div id="header">...
|
by: fperri |
last post by:
Hello,
I have a calculated field in my query that uses a function to come up with the value. The function has various fields from the table used in the query passed into it as parameters. For some...
|
by: Gilberto |
last post by:
Hello,
I have two tables: COSTING and PRICING, both with the following fields:
product name French
packaging
transportation
ddp
I want to create a query so that from a text box in the...
|
by: BurtonBach |
last post by:
I previously wrote the following query which gives me that data I wanted and currently returns 436 records:
SELECT qryTonnageSelect.Jobs_Job_ID, qryTonnageSelect.SumOfTransactions_TonsNetWeight,...
|
by: lisles |
last post by:
i have a page funtion.php which hs the function to connect to the db
/* Mysql Connection */
function connect(){
global $db_server,$db_user,$db_pass,$db;//Global Values from the config.php...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
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...
| |
