krash
01-11-2010, 07:45 AM
Hi all!
Ok, I've finally reached my limit. I just can't figure this out. I know that IE has all kinds of problems with CSS, but for the life of me, can't understand this one. I am testing this on IE8 and the min/max-height and widths work just fine for my wrapper div. The problem lies in that ap divs contained inside of this wrapper change position when the browser window is resized and the min-height is reached. This seems to only happen when I use the bottom property to position the inner div. Of course everything works fine in FF. I've included some simple code to show what I mean, because explaining this seems more difficult than I thought it would be.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
height:100%;
background-color: #000000;
}
html {height: 100%;}
#Layer1 {
position:relative;
width:100%;
height:70%;
z-index:1;
border: solid green;
min-height:300px;
min-width:600px;
overflow:hidden;
}
#Layer2 {
position:absolute;
width:200px;
height:50px;
z-index:2;
right: 100px;
bottom:50px;
overflow: visible;
border: solid blue;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<div id="Layer2"></div>
</div>
</body>
</html>
If you resize the browser smaller than the min-height of the green box, then the red box changes position. Any help is greatly appreciated!
Ok, I've finally reached my limit. I just can't figure this out. I know that IE has all kinds of problems with CSS, but for the life of me, can't understand this one. I am testing this on IE8 and the min/max-height and widths work just fine for my wrapper div. The problem lies in that ap divs contained inside of this wrapper change position when the browser window is resized and the min-height is reached. This seems to only happen when I use the bottom property to position the inner div. Of course everything works fine in FF. I've included some simple code to show what I mean, because explaining this seems more difficult than I thought it would be.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
height:100%;
background-color: #000000;
}
html {height: 100%;}
#Layer1 {
position:relative;
width:100%;
height:70%;
z-index:1;
border: solid green;
min-height:300px;
min-width:600px;
overflow:hidden;
}
#Layer2 {
position:absolute;
width:200px;
height:50px;
z-index:2;
right: 100px;
bottom:50px;
overflow: visible;
border: solid blue;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<div id="Layer2"></div>
</div>
</body>
</html>
If you resize the browser smaller than the min-height of the green box, then the red box changes position. Any help is greatly appreciated!