468,272 Members | 2,000 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,272 developers. It's quick & easy.

Make content in <td> scroll

I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100% of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of the
page.

HELP please

Lloyd Sheen

Mar 18 '08 #1
9 3029
add a div tag around the table?
something like

<div style="height:10px;width;100px;">
--your html table
</div>

(something like that)

"Lloyd Sheen" <a@b.cwrote in message
news:%2****************@TK2MSFTNGP05.phx.gbl...
>I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100% of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of
the page.

HELP please

Lloyd Sheen

Mar 18 '08 #2
"Lloyd Sheen" <a@b.cwrote in message
news:%2****************@TK2MSFTNGP05.phx.gbl...
I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100%
of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of
the
page.
The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.

--
Anthony Jones - MVP ASP/ASP.NET
Mar 18 '08 #3

"Anthony Jones" <An*@yadayadayada.comwrote in message
news:eo**************@TK2MSFTNGP04.phx.gbl...
"Lloyd Sheen" <a@b.cwrote in message
news:%2****************@TK2MSFTNGP05.phx.gbl...
>I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100%
of
>the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of
the
>page.

The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.

--
Anthony Jones - MVP ASP/ASP.NET

The DTD is :

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

In Mike's post he used a px height and that works. If I use a % height it
does not work.

Thanks,
LS

Mar 18 '08 #4
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high. this
is because in the w3c standard there is no default height to a body, so the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
-- bruce (sqlwork.com)
"Lloyd Sheen" wrote:
>
"Anthony Jones" <An*@yadayadayada.comwrote in message
news:eo**************@TK2MSFTNGP04.phx.gbl...
"Lloyd Sheen" <a@b.cwrote in message
news:%2****************@TK2MSFTNGP05.phx.gbl...
I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100%
of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of
the
page.
The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.

--
Anthony Jones - MVP ASP/ASP.NET

The DTD is :

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

In Mike's post he used a px height and that works. If I use a % height it
does not work.

Thanks,
LS

Mar 18 '08 #5

"bruce barker" <br*********@discussions.microsoft.comwrote in message
news:26**********************************@microsof t.com...
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body, so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
-- bruce (sqlwork.com)
"Lloyd Sheen" wrote:
>>
"Anthony Jones" <An*@yadayadayada.comwrote in message
news:eo**************@TK2MSFTNGP04.phx.gbl...
"Lloyd Sheen" <a@b.cwrote in message
news:%2****************@TK2MSFTNGP05.phx.gbl...
I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds
100%
of
the height it should add a scroll bar to ensure that the table remains
at
100% of the browser screen and the contents do not scroll off the end
of
the
page.
The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%;
overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between
modes.

--
Anthony Jones - MVP ASP/ASP.NET


The DTD is :

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

In Mike's post he used a px height and that works. If I use a % height
it
does not work.

Thanks,
LS

I suppose that is the same for the width??

Thanks
LS

Mar 18 '08 #6
"bruce barker" <br*********@discussions.microsoft.comwrote in message
news:26**********************************@microsof t.com...
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body, so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.


Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it the
height of the viewport. From there child elements with 100% will take the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.
--
Anthony Jones - MVP ASP/ASP.NET
Mar 19 '08 #7
"Lloyd Sheen" <a@b.cwrote in message
news:uz**************@TK2MSFTNGP03.phx.gbl...
>
"Anthony Jones" <An*@yadayadayada.comwrote in message
news:Os**************@TK2MSFTNGP03.phx.gbl...
"bruce barker" <br*********@discussions.microsoft.comwrote in message
news:26**********************************@microsof t.com...
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body, so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.


Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it
the
height of the viewport. From there child elements with 100% will take
the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.
--
Anthony Jones - MVP ASP/ASP.NET


Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.

One last question. In googling around for the resize I notice that for
both
IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance" with standards does this mean it will
stop working?
That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.
--
Anthony Jones - MVP ASP/ASP.NET
Mar 19 '08 #8

"Anthony Jones" <An*@yadayadayada.comwrote in message
news:OB**************@TK2MSFTNGP04.phx.gbl...
"Lloyd Sheen" <a@b.cwrote in message
news:uz**************@TK2MSFTNGP03.phx.gbl...
>>
"Anthony Jones" <An*@yadayadayada.comwrote in message
news:Os**************@TK2MSFTNGP03.phx.gbl...
"bruce barker" <br*********@discussions.microsoft.comwrote in message
news:26**********************************@microsof t.com...
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body,
so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.


Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give
it
the
height of the viewport. From there child elements with 100% will take
the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.
--
Anthony Jones - MVP ASP/ASP.NET



Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.

One last question. In googling around for the resize I notice that for
both
>IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance" with standards does this mean it
will
stop working?

That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure
that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.
--
Anthony Jones - MVP ASP/ASP.NET

Thanks for all your help

Mar 19 '08 #9
Lloyd Sheen pisze:
[...]
The DTD is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If You don't serve your xhtml as application/xhtml+xml then You don't
need xhtml. Just use simple HTML, for example Strict version. See
http://www.w3.org/MarkUp/2004/xhtml-faq

--
Peter
Mar 20 '08 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Zenobia | last post: by
2 posts views Thread by bissatch | last post: by
5 posts views Thread by Derek Fountain | last post: by
3 posts views Thread by jack | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.