473,385 Members | 1,317 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

IE empty div and height: 100%

I ran into a problem i just *know* I've seen described a 100 times before

I have an empty (so far) div with ist height: set to 100%. The main reason
for this div is to show its white border-right across the whole browser
window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the top of the
screen

http://dagsunde.com/GaiaSoft/index.html

What it the trick to fool IE6 to render an empty div to the full height of
the window?

TIA...

--
Dag.
Nov 22 '06 #1
5 12398
Els
Dag Sunde wrote:
I ran into a problem i just *know* I've seen described a 100 times before

I have an empty (so far) div with ist height: set to 100%. The main reason
for this div is to show its white border-right across the whole browser
window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the top of the
screen
height: 100%;
100% of what? Its parent. How high is its parent? 1em I think :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Legião Urbana - SerenÃ*ssima (acústico)
Nov 22 '06 #2
Els wrote:
Dag Sunde wrote:
>I ran into a problem i just *know* I've seen described a 100 times
before

I have an empty (so far) div with ist height: set to 100%. The main
reason for this div is to show its white border-right across the
whole browser window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the top
of the screen

height: 100%;
100% of what? Its parent. How high is its parent? 1em I think :-)
100% of its parent, and its parent is <body>...
And body have another child that is 600px high, so body is at least
600px.

Which means, 100% of 600px, but it only shows as 1em high.

Firefox and Opera renders is as 100% of the client screen height
(which is what I want)

--
Dag.
Nov 22 '06 #3
Els
Dag Sunde wrote:
Els wrote:
>Dag Sunde wrote:
>>I have an empty (so far) div with ist height: set to 100%. The main
reason for this div is to show its white border-right across the
whole browser window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the top
of the screen

height: 100%;
100% of what? Its parent. How high is its parent? 1em I think :-)

100% of its parent, and its parent is <body>...
And body have another child that is 600px high, so body is at least
600px.

Which means, 100% of 600px, but it only shows as 1em high.

Firefox and Opera renders is as 100% of the client screen height
(which is what I want)
Okay, understood. But IE needs the height to be set specifically.
You could give html and body "height:100%;", but then the div won't
extend below the bottom of the screen, which you'll see when scrolling
the page up in IE.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: De Dijk - Session1_Track19
Nov 22 '06 #4
Els wrote:
Dag Sunde wrote:
>Els wrote:
>>Dag Sunde wrote:

I have an empty (so far) div with ist height: set to 100%. The main
reason for this div is to show its white border-right across the
whole browser window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the
top of the screen

height: 100%;
100% of what? Its parent. How high is its parent? 1em I think :-)

100% of its parent, and its parent is <body>...
And body have another child that is 600px high, so body is at least
600px.

Which means, 100% of 600px, but it only shows as 1em high.

Firefox and Opera renders is as 100% of the client screen height
(which is what I want)

Okay, understood. But IE needs the height to be set specifically.
You could give html and body "height:100%;", but then the div won't
extend below the bottom of the screen, which you'll see when scrolling
the page up in IE.
I see...

I tried it, and you're quite right. It now shows up in IE too, but if I
fill up with more content it stops where the browsers client height was
when i start scrolling...

Is there really no way around this?

I can set it explicitly to pixels with javaScript, but that is such a
dirty hack...

Thank you, by the way... :-)

--
Dag.
Nov 22 '06 #5
Els
Dag Sunde wrote:
Els wrote:
>Dag Sunde wrote:
>>Els wrote:
Dag Sunde wrote:

I have an empty (so far) div with ist height: set to 100%. The main
reason for this div is to show its white border-right across the
whole browser window from top to bottom.
And so it does in FF, but IE shows only 1em's worth of it at the
top of the screen

Is there really no way around this?
Not one that doesn't need a lot of hacking afaik. But since all you
want is a border that extends to the full length of your document, why
not wrap the page in a wrapper div, and set the right border to that
wrapper div? That way it's always as long as the page, and no hacks
are needed.
Thank you, by the way... :-)
You're welcome :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Terence Trent D'Arby - Seven More Days
Nov 22 '06 #6

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

Similar topics

3
by: KathyB | last post by:
Hi, I'm trying to find a way to validate input text boxes where I don't know the names until the page is rendered. I've got 2 validate functions that fire with the onsubmit button of a "mini" form...
5
by: Greg N. | last post by:
Hi folks, I have a table cell with a background image, something like <td background=landscape.jpg height=200></td> The sole purpose of this code is to display the image inside that table...
3
by: Odo | last post by:
Hi, my Problem is that I want to use an empty div with 20pix height as a seperator. With Firefox and Safari everything is fine. But IE/Mac do not display the height, instead there is only a...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
0
by: Markus Olderdissen | last post by:
i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page....
1
by: Mike Collins | last post by:
I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the...
1
by: mascouta | last post by:
I have a lot of problems with IE browser, one of them is described in this topic. in my website i have div Calculator with background image. it displayed perfectly with Firefox browser however in IE...
0
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
4
by: AAaron123 | last post by:
<body runat="server" id="MainBody"> <form id="form1" runat="server" style="background-color:green; width: 100%; height: 100%"> <br /> Table1" runat="server" Style="background-color:Yellow;...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
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
0
BarryA
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...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
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...
0
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 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.