Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background: none repeat scroll 0 0 #EFEFEF;
overflow: hidden;
position: relative;
margin: 0px;
padding: 10px;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
#content{
height:200px;
}
fieldset,textarea{
border: 0 none;
}
#LeftPanel
{
width: 48%;
float: left;
height:100%;
}
.window {
border: 1px solid #ADADAD;
width: 100%;
float: left;
}
.top {
height: 25%;
}
.bottom {
height: 75%;
}
.code{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="content">
<fieldset id="LeftPanel">
<div id="div_A" class="window top">
<textarea id="code_A" class="code">A</textarea>
</div>
<div id="div_B" class="window bottom">
<textarea id="code_B" class="code">B</textarea>
</div>
</fieldset>
</div>
</body>
</html>
This code functions correctly in Chrome, Firefox, and IE8/IE9 browsers. However, there seems to be issues with compatibility in IE6/IE7.
In IE6/IE7:
In Firefox:
If anyone has suggestions on how to fix the issue in IE6/IE7, your help would be greatly appreciated! Thank you!