the deal with my div

[Guest]

hey all,
i have a plain and simple div on my page and all i've done was change the
background color to fuchsia, made the height and width 95%.

how come the div will expand width-wise the full 95% and not the height?

thanks,
rodchar

 

[Mark Fitzpatrick]

Heights are a tricky thing, they tend to do what they wish depending on the
browser. Part of it is the way the browser interprets the page. If it
decides that the content of the page only fills 40%, you may end up with a
div that fills 95% of the 40%. A lot of it is the interpretation of heights
as in the HTML W3C specs. To say the least, height attributes are often the
bastard child and aren't treated with the same respect in the standards as
widths are.

 

[Laurent Bugnion]

Hi,

hey all,
i have a plain and simple div on my page and all i've done was change the
background color to fuchsia, made the height and width 95%.

how come the div will expand width-wise the full 95% and not the height?

thanks,
rodchar

Try setting the form's height to 100%. In some browsers the form is
considered as a rendered element, with a height and a width.

Should that fail, consider including your DIV in a one-celled table,
with a 100% width and height.

HTH,
Laurent

 

[Guest]

Percentage values are based on the parent. The body height is only as high as
it needs to be, not as high as the browser's window. You'd need to add in
some javascript to read the browser window's height and then compute the
height of the div to be 95% of that value. The same is technically true of
the width value also, but the body's width defaults to the browser window's
width. So the div's parent element (document.body) just happens to be the
whole width of the browser.

 

[Guest]

Please, for the love of CSS, don't use a table to do page layout.

 

[Laurent Bugnion]

Hi,

Percentage values are based on the parent. The body height is only as high as
it needs to be, not as high as the browser's window. You'd need to add in
some javascript to read the browser window's height and then compute the
height of the div to be 95% of that value. The same is technically true of
the width value also, but the body's width defaults to the browser window's
width. So the div's parent element (document.body) just happens to be the
whole width of the browser.

I fail to see why it's better to use JavaScript rather than a table to
do that.

Laurent

 

[Guest]

Its not what tables were meant for. Tables are meant for displaying tabluar
data. Yes it would solve this problem just as a screwdriver could be used as
a pry bar.

Using tables for page layout can cause other problems though, like CSS
styles not cascading down into the table and it could become cumbersome for
page readers for the deaf to have to read down into the <table> then the <tr>
then the <td> just to get to the content.

Its just not how HTML was designed. But it would work, yes.

 

[Guest]

Correction. Page readers for the blind not the deaf. duh.

 

[darrel]

styles not cascading down into the table and it could become cumbersome

for
page readers for the deaf to have to read down into the <table> then the
<tr>
then the <td> just to get to the content.

Screen readers don't literally read the source code. Well formed tables
shouldn't be much of an accessibility issue.

That said, CSS does have many advantages.

-Darrel

 

[Laurent Bugnion]

Hi,

Its not what tables were meant for. Tables are meant for displaying tabluar
data. Yes it would solve this problem just as a screwdriver could be used as
a pry bar.

Using tables for page layout can cause other problems though, like CSS
styles not cascading down into the table and it could become cumbersome for
page readers for the deaf to have to read down into the <table> then the <tr>
then the <td> just to get to the content.

Its just not how HTML was designed. But it would work, yes.

I agree. But getting the window's size with JavaScript is also a bad
tool. Out of two bad tools, I prefer the one which works also without
JavaScript ;-)

Just my opinion, of course.

BTW, in IE, setting the height of the body to 100% solves the problem.
In Firefox it doesn't (at least not on Windows).

Greetings,
Laurent

 

[darrel]

I agree. But getting the window's size with JavaScript is also a bad tool.

How so? Seems that Javascript is the more applicable tool for this.

Even with tables, 100% height isn't technically a standard (even though some
browsers do support it).

Personally, I'd just give the DIV a specific height and live with it. I try
to avoid worrying about how tall the viewport is...let the page be as long
as it needs to be.

-Darrel

 

[Guest]

Good point. I do generally focus on Firefox first, then tweak for IE.
Something i just tried and it worked ok in both FF2.0 and IE6 is

<HEAD>
<style>
BODY
{
min-height:100%;
}
</style>

</HEAD>

<BODY>
<div style="height:100%; border:black solid 1px;">
TEST
</div>
</BODY>

 

[Laurent Bugnion]

Hi,

How so? Seems that Javascript is the more applicable tool for this.

Because it's not cross browser compatible (at least not in my
experience, and I'd love to be proven wrong, so don't hesitate ;-)

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

And also because JavaScript is sometimes disabled. I rely on JavaScript
(and people who know me know that I relied on it for a very long time,
see comp.lang.javascript archives). I use it to improve the user
experience, but the most important thing for me is that it must
absolutely degrade gracefully. In other words, if it's not available, I
want the user to notice as little as possible, and unfortunately when
you use it to set the layout, he does notice.

HTH,
Laurent

 

[Laurent Bugnion]

Hi,

Good point. I do generally focus on Firefox first, then tweak for IE.
Something i just tried and it worked ok in both FF2.0 and IE6 is

<HEAD>
<style>
BODY
{
min-height:100%;
}
</style>

</HEAD>

<BODY>
<div style="height:100%; border:black solid 1px;">
TEST
</div>
</BODY>

Oh, something came to my mind, and I tested again with the body height
set to 100%. It works fine with HTML 4.0 transitional DOCTYPE in both
IE6 and FF1.5.

However, even min-height fails in IE6 and FF1.5 with DOCTYPE set to XHTML...

Also, if the DIV is enclosed in a form, the form's height must also be
set to 100%.

OK, that's really off topic now.

HTH,
Laurent

 

[darrel]

And also because JavaScript is sometimes disabled. I rely on JavaScript

(and people who know me know that I relied on it for a very long time, see
comp.lang.javascript archives). I use it to improve the user experience,
but the most important thing for me is that it must absolutely degrade
gracefully. In other words, if it's not available, I want the user to
notice as little as possible, and unfortunately when you use it to set the
layout, he does notice.

I agree, though I don't see that 'enhancing layout' is not an applicable use
of javascript. Provided the markup is semantic, accessible, and is usable
without javascript, I'm fine with that.

-Darrel

 

[Guest]

Writing javascript to do x for one browser and y for another isn't hard, just
time consuming and requires good testing. But i don't think that any asp.net
application could be expected to run correctly with out javascript enabled on
the client side. As far as i'm concerned if you don't have javascript enabled
you're just not going to be able to function on today's web.

rodchar, if i were you i would just read up on the w3c specs and do what
ever works for you. there's lots of documentation on the benefits of
tableless css design, but a table would fix this problem also.

 

[Laurent Bugnion]

Hi,

Writing javascript to do x for one browser and y for another isn't hard, just
time consuming and requires good testing.

Additionally, cross-browser coding is also not that hard, and more and
more possible, except for minor functionalities like the one we're
talking about.

But i don't think that any asp.net
application could be expected to run correctly with out javascript enabled on
the client side. As far as i'm concerned if you don't have javascript enabled
you're just not going to be able to function on today's web.

I think that's true for thick clients. However, don't forget all the
users (more and more each day) who access your page using mobile
devices, where only a subset (at best) of JavaScript is available.
Irrelevant point in our case, since the layout issue on a mobile device
is totally different anyway.

rodchar, if i were you i would just read up on the w3c specs and do what
ever works for you. there's lots of documentation on the benefits of
tableless css design, but a table would fix this problem also.

Pragmatism and compromise are the two most important attitudes in
today's world of software engineering. I concur

Laurent

 

[darrel]

As far as i'm concerned if you don't have javascript enabled

you're just not going to be able to function on today's web.

In reality, that's true. In theory, it shouldn't be.

Javascript should always be treated as an 'enhancement' to the user
experience...not a requirement.

one of the major benefits of the web is the ability to make it accessible to
a much wider audience than any other medium that has come before it. Even
(oddly enough) Microsoft seems to be accepting this as the better way. It
sounds like ASP.net 2.0 and Atlas not only now support a wider range of
browsers, but Atlas has also been designed so that it can gracefully degrade
for those without javascript if one builds the site correctly.

-Darrel