Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Resizeable Window With Image Borders</title>
</head>
<body>
<div id="container" style="border:#000000 solid 1px; height:240px; width:200px; position:absolute;">
<div id="top" style="height:20px; position:absolute; top:0px; right:4px; left:4px; background:#666666;">Window Title</div>
<div id="top_left" style="position:absolute; height:20px; width:4px; top:0px; left:0px; background:#00FF00;"></div>
<div id="top_right" style="position:absolute; height:20px; width:4px; top:0px; right:0px; background:#00FF00;"></div>
<div id="left" style="position:absolute;bottom:4px;left:0px; top:20px; width:4px; background:#0000FF"></div>
<div id="middle" style="position:absolute; bottom:4px; left:4px; right:4px; top:20px; background:#CCCCCC; overflow:auto;">
<p>Window content here.
The colored frame around the outside would be filled with images, and this window made resizeable with JavaScript.
I just can't get this to display correctly in IE!
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Auto Scroll.
</p>
</div>
<div id="right" style="position:absolute; bottom:4px; right:0px; top:20px; width:4px; background:#0000FF"></div>
<div id="bottom" style="position:absolute;bottom:0px; right:4px; left:4px; height:4px; height:4px; background:#0000FF;"></div>
<div id="bottom_left" style=" position:absolute;bottom:0px; left:0px; height:4px; width:4px; background:#00FF00;"></div>
<div id="bottom_right" style=" position:absolute;bottom:0px; right:0px; height:4px; width:4px; background:#00FF00;"></div>
</div>
</body>
</html>
I hope someone can help me out. This works well in firefox, opera, etc. But it just doesn't display correctly in IE6.
Please excuse the messy css :P I havent optimized it yet, this is just a test.
I, personally, would advise against absolute positioning for layout purposes.
Instead try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Resizeable Window With Image Borders</title><style type="text/css">
#container {
height:240px;
width:200px;
border:1px solid #000;
font-family:verdana,arial,helvetica,sans-serif;
margin:auto;
}
#top_left,#top_right {
height:20px;
width:4px;
background-color:#0f0;
float:left;
}
#top {
line-height:20px;
width:192px;
font-size:13px;
text-align:center;
background-color:#666;
float:left;
}#left,#right {
height:216px;
width:4px;
background-color:#00f;
float:left;
}
#middle {
height:216px;
width:192px;
background-color:#ccc;
overflow:auto;
float:left;
}
#middle p {
margin:0;
padding:8px;
font-size:10px;
text-align:justify;
}
#bottom_left,#bottom_right {
height:4px;
width:4px;
font-size:0;
background-color:#0f0;
float:left;
}
#bottom {
height:4px;
width:192px;
font-size:0;
background-color:#00f;
float:left;
}
</style></head>
<body><div id="container">
<div id="top_left"></div>
<div id="top">Window Title</div>
<div id="top_right"></div><div id="left"></div>
<div id="middle">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>
<div id="right"></div><div id="bottom_left"></div>
<div id="bottom"></div>
<div id="bottom_right"></div></div>
</body>
</html>
