Hi,
The project I'm currently working on was initially designed for IE 6.0 exclusively but now it should support Firefox 1.5+ as well.
Among lots of different problems our team stumbled upon there is one I wanted to ask about. I am talking about Firefox behavior here.
Below is a complete simplified markup with one little script and basic styling representing the problem.
But first some comments:
Rendering mode for IE was quirks mode, so we had to add -moz-box-sizing: border-box; declaration not to recalculate the entire layout.
Code:
<html>
<head>
<title>Scrolling problem</title>
<style type="text/css">
* { -moz-box-sizing: border-box; }
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
td {
width: 100%;
height: 100%;
}
#myTable {
table-layout: fixed;
border-spacing: 0px;
border: 3px solid red;
width: 100%;
height: 100%;
}
#myDiv {
width: 100%; height: 100%;
overflow: auto;
border: 3px solid blue;
}
</style>
<script type="text/javascript">
function setContent() {
var s = "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
s += "Text to overflow Text to overflow Text to overflow Text to overflow ";
document.getElementById("myDiv").innerHTML = s;
}
</script>
</head>
<body onload="setContent();">
<table id="myTable" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="myDiv">
</div>
</td>
</tr>
</table>
</body>
</html>
So we have a grid with fluid layout where width and height are set to 100%.
Inside of <td/> element lies <div/> element which dimensions are also set to 100%. This <div/> element gets its content dynamically after the page is completely rendered and have overflow property set to auto to enable scrolling of its content.
Lets assume that the ORIGINAL size of the window is small enough to cause overflow of the <div/> element's content (for example 400x300).
Initially everything is ok. We have a table with the dimensions of a viewport and <div/> element with scrollable content. The problem raises its head when we are trying to resize the window. Scroll bar of the <div/> element disappears and content of the div breaks down out of the viewport borders.
Could you explain the reason of the behavior? The question really is: why it is rendered initially in one way, but after resizing it seems to remember it shouldn't behave in such a way and reflows completely differently.
Actually the problem was solved.
We have overcome it by adding additional <div/> element inside the <td/> element. Style for this outer <div/> is set to
Code:
div.outer {
position: relative;
width: 100%;
height: 100%
}
and our initial inner <div/> element got the style
Code:
div.inner {
position: absolute;
overflow: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
But I would definitly wanted to know where the root of the problem lies. Any references to exact places in CSS specification or other authoritative sources of information are greately appriciated.
Thanks in advance
Scrollable content with fluid layout problem
