I created a simple <div> where style is {WIDTH: 100%; HEIGHT: 100%}. Running it under IE in its normal mode produces the right result - a box spanning the full width and height of the screen. However, when I change to the strict mode via:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The height stops working and the box is only as high as its content. Any thoughts why this happens, and how to overcome it (whilst remaining compliant with the "strict" mode)?
Thanks in advance...Height: 100%;
doesn't exist. The height of a selection is dependent either upon the amount of content within the <div>, or a specific pixel amount set in the CSS.
IE stretches the page as part of its "quirks" mode - something it goes into when either the page has bad coding or neglects to include a doctype. When you put in a specific doctype, that setting overrides IE's default.
You will need to set either a specific amount, or create a background image that mimics the box and place that image in the <body> tag.
KDLAHi there Vic,
you could try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>100% div</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html,body {
height:100%;
margin:0px;
padding:0px;
}
div {
height:100%;
background-color:#f00;
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>
cootheadRunning it under IE in its normal mode produces the right result - a box spanning the full width and height of the screen.It produces the result you desire but it's not the "right" result.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The height stops working and the box is only as high as its content. Any thoughts why this happens, and how to overcome it (whilst remaining compliant with the "strict" mode)?
Thanks in advance...Height: 100%;
doesn't exist. The height of a selection is dependent either upon the amount of content within the <div>, or a specific pixel amount set in the CSS.
IE stretches the page as part of its "quirks" mode - something it goes into when either the page has bad coding or neglects to include a doctype. When you put in a specific doctype, that setting overrides IE's default.
You will need to set either a specific amount, or create a background image that mimics the box and place that image in the <body> tag.
KDLAHi there Vic,
you could try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>100% div</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html,body {
height:100%;
margin:0px;
padding:0px;
}
div {
height:100%;
background-color:#f00;
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>
cootheadRunning it under IE in its normal mode produces the right result - a box spanning the full width and height of the screen.It produces the result you desire but it's not the "right" result.