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,
rodcharHeights 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.
--
Hope this helps,
Mark Fitzpatrick
Former Microsoft FrontPage MVP 199?-2006
"rodchar" <rodchar@dotnet.itags.org.discussions.microsoft.comwrote in message
news:A7B544A3-A77E-4BA2-89BC-E5D5A259117C@dotnet.itags.org.microsoft.com...
Quote:
Originally Posted by
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
Hi,
rodchar wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
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.
"rodchar" wrote:
Quote:
Originally Posted by
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
Please, for the love of CSS, don't use a table to do page layout.
"Laurent Bugnion" wrote:
Quote:
Originally Posted by
Hi,
>
rodchar wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
>
Hi,
Jason Stearns wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
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 <tablethen the <tr>
then the <tdjust to get to the content.
Its just not how HTML was designed. But it would work, yes.
"Laurent Bugnion" wrote:
Quote:
Originally Posted by
Hi,
>
Jason Stearns wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
>
Correction. Page readers for the blind not the deaf. duh.
"Jason Stearns" wrote:
Quote:
Originally Posted by
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 <tablethen the <tr>
then the <tdjust to get to the content.
>
Its just not how HTML was designed. But it would work, yes.
>
"Laurent Bugnion" wrote:
>
Quote:
Originally Posted by
Hi,
Jason Stearns wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
styles not cascading down into the table and it could become cumbersome
Quote:
Originally Posted by
for
page readers for the deaf to have to read down into the <tablethen the
<tr>
then the <tdjust 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
Hi,
Jason Stearns wrote:
Quote:
Originally Posted by
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 <tablethen the <tr>
then the <tdjust 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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
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
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" wrote:
Quote:
Originally Posted by
Hi,
>
Jason Stearns wrote:
Quote:
Originally Posted by
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 <tablethen the <tr>
then the <tdjust 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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
>
Hi,
darrel wrote:
Quote:
Originally Posted by
Quote:
Originally Posted by
>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.
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/tutori...t/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, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Hi,
Jason Stearns wrote:
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
And also because JavaScript is sometimes disabled. I rely on JavaScript
Quote:
Originally Posted by
(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
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" wrote:
Quote:
Originally Posted by
Hi,
>
darrel wrote:
Quote:
Originally Posted by
Quote:
Originally Posted by
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.
>
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/tutori...t/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, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
>
Hi,
Jason Stearns wrote:
Quote:
Originally Posted by
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.
Quote:
Originally Posted by
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.
Quote:
Originally Posted by
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
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
As far as i'm concerned if you don't have javascript enabled
Quote:
Originally Posted by
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
0 comments:
Post a Comment