I have been experimenting with abandoning tables and using CSS - but a perennial problem is restricting the layout to the screen size. I don't want people to have to scroll down.
I tried the code below with the aim of creating a div that occupied the whole of the screen with a div inside it that has dynamically generated content. If there is more content than the div (inside) will take, I want the inside div to get scroll bars - I don't want the inside div to enlarge and get bigger than the screen causing scroll bars to appear on the window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
function setup()
{
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
</script>
</head>
<body topmargin=0 leftmargin=0 bottommargin=0 topmargin=0 onload="setup();">
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table>
<%FOR i = 0 to 50%>
<tr><td>Egg and chips</td></tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
I included the stuff at the top i.e.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
because, in an answer to a previous question, Charles said I was not using correct HTML. If I take this stuff off the page, it works as I want it to work. If I leave it on the page, the inside div expands below the bottom of the screen. My question is - can anyone tell me how I can get the effect I want and still use correct HTML?
Thanks for any help.This is XHTML complient:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>New Page 1</title>
<script type="text/javascript">
<!--
function setup(){
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" topmargin="0" onload="setup();">
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table summary="">
<%FOR i = 0 to 50%>
<tr>
<td>Egg and chips</td>
</tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
RyanJThanks for your answer. The only difference I could spot was that you added 'summary=""' in the table tag.
But, to make sure, I pasted your code into my page. It still does the same thing. The div extends down below the screen. If you remove the DOCTYPE stuff the div is the correct size and gets scroll bars to deal with the data overflow.
Why does strict HTML not allow you to lay out pages properly. I have a lot of data to impart and you need to look at two datasets at once. If they are both in scrollable divs you can manage this, if you have to scroll the page you can't.topmargin="0" leftmargin="0" bottommargin="0" topmargin="0"
get rid of this crap...
and summary isn't a required attribute.{overflow:auto;} should do the trick as far as I know. Although Why you want to make a page that does not scroll, yet have a div covering the entire window that does scroll is beyond me.1. non-zero position values must have a unit ("20px", "20em", etc.).
2. overflow-x is a CSS-3 property, so may not be supported by all browsers.Originally posted by sciguyryan
This is XHTML complient… No, it's not. XHTML complient browsers are permitted to simply ignore anything inside of comments. You cannot use that method of hiding your scripts from pre-1998 browsers.
This is yet another examplye of why we should just stop using XHTML™. It doesn't help anything and it's just causing trouble.
And another thing, From the HTML 4.01 Specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/styles.html#h-14.2.1">http://www.w3.org/TR/html401/present/st ... l#h-14.2.1</a><!-- m -->)
Authors must specify the style sheet language of style information associated with an HTML document.
Authors should use the META element to set the default style sheet language for a document. For example, to set the default to CSS, authors should put the following declaration in the HEAD of their documents:
<META http-equiv="Content-Style-Type" content="text/css">Thanks for all your answers but none of them seem to help. The simple fact remains that if I write the following but omit the <!DOCTYPE declaration at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<title>New Page 1</title>
<script type="text/javascript">
<!--
function setup(){
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" topmargin="0" onload="setup();">
<div style="position:relative; top:0; left:0; overflow:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table summary="">
<%FOR i = 0 to 50%>
<tr>
<td>Egg and chips</td>
</tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
I get a page with a div on it that occupies the top left of the page and has scroll bars on it to display the overflowing content.
If I include the <!DOCTYPE stuff at the top, the same div now extends off the screen. Why does enforcing strict html prevent my from laying out the page the way I want it to?
I tried the code below with the aim of creating a div that occupied the whole of the screen with a div inside it that has dynamically generated content. If there is more content than the div (inside) will take, I want the inside div to get scroll bars - I don't want the inside div to enlarge and get bigger than the screen causing scroll bars to appear on the window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
function setup()
{
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
</script>
</head>
<body topmargin=0 leftmargin=0 bottommargin=0 topmargin=0 onload="setup();">
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table>
<%FOR i = 0 to 50%>
<tr><td>Egg and chips</td></tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
I included the stuff at the top i.e.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
because, in an answer to a previous question, Charles said I was not using correct HTML. If I take this stuff off the page, it works as I want it to work. If I leave it on the page, the inside div expands below the bottom of the screen. My question is - can anyone tell me how I can get the effect I want and still use correct HTML?
Thanks for any help.This is XHTML complient:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>New Page 1</title>
<script type="text/javascript">
<!--
function setup(){
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" topmargin="0" onload="setup();">
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table summary="">
<%FOR i = 0 to 50%>
<tr>
<td>Egg and chips</td>
</tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
RyanJThanks for your answer. The only difference I could spot was that you added 'summary=""' in the table tag.
But, to make sure, I pasted your code into my page. It still does the same thing. The div extends down below the screen. If you remove the DOCTYPE stuff the div is the correct size and gets scroll bars to deal with the data overflow.
Why does strict HTML not allow you to lay out pages properly. I have a lot of data to impart and you need to look at two datasets at once. If they are both in scrollable divs you can manage this, if you have to scroll the page you can't.topmargin="0" leftmargin="0" bottommargin="0" topmargin="0"
get rid of this crap...
and summary isn't a required attribute.{overflow:auto;} should do the trick as far as I know. Although Why you want to make a page that does not scroll, yet have a div covering the entire window that does scroll is beyond me.1. non-zero position values must have a unit ("20px", "20em", etc.).
2. overflow-x is a CSS-3 property, so may not be supported by all browsers.Originally posted by sciguyryan
This is XHTML complient… No, it's not. XHTML complient browsers are permitted to simply ignore anything inside of comments. You cannot use that method of hiding your scripts from pre-1998 browsers.
This is yet another examplye of why we should just stop using XHTML™. It doesn't help anything and it's just causing trouble.
And another thing, From the HTML 4.01 Specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/styles.html#h-14.2.1">http://www.w3.org/TR/html401/present/st ... l#h-14.2.1</a><!-- m -->)
Authors must specify the style sheet language of style information associated with an HTML document.
Authors should use the META element to set the default style sheet language for a document. For example, to set the default to CSS, authors should put the following declaration in the HEAD of their documents:
<META http-equiv="Content-Style-Type" content="text/css">Thanks for all your answers but none of them seem to help. The simple fact remains that if I write the following but omit the <!DOCTYPE declaration at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<title>New Page 1</title>
<script type="text/javascript">
<!--
function setup(){
div1.style.height = document.body.offsetHeight - 300;
div1.style.width = '200px';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" topmargin="0" onload="setup();">
<div style="position:relative; top:0; left:0; overflow:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #CC0000;">
<div id="div1" style="position:relative; top:20; left:20; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:10%; height:10%; border:1px solid #0000CC;">
<table summary="">
<%FOR i = 0 to 50%>
<tr>
<td>Egg and chips</td>
</tr>
<%NEXT%>
</table>
</div>
</div>
</body>
</html>
I get a page with a div on it that occupies the top left of the page and has scroll bars on it to display the overflowing content.
If I include the <!DOCTYPE stuff at the top, the same div now extends off the screen. Why does enforcing strict html prevent my from laying out the page the way I want it to?