Ciao a tutti.

Ho una pagina molto semplice dovo voglio inserire una cornice (main) e al suo interno un'altra cornice (middle).

Ho creato du div, e con il css ho dato le posizioni in %. Il tutto su firefox funziona perfettamente, ma non su IE. Come mai? Come posso risolvere il problema?

Posto sotto il semplice codice. Grazie mille,

codice:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
body{background-image: url(../images/bg_darkgreen.gif);
background-repeat: repeat;
background-color: #9BD094;
}

a:link {
color: #CC3333;
}

a:visited {
color: #990033;

}

div#main {
background-image: url(../images/bg_lightgreen.gif);
background-repeat: repeat;
background-color: #EFFEED;
border: 1px solid #006600;
position: absolute;
width: 80%;
left: 10%;
right: 10%;
top: 15%;
bottom: 15%;

}
ul
{
    margin: 0px;
    list-style-type: None;
}
li
{
    display: Inline;
    float: Left;
    font: Normal 10px Verdana;
    width: 15%;
    padding: 1px;
    border-right: Solid 1px #000000;
    border-bottom: Solid 1px #000000;
}


div#middle {
position: absolute;
left: 0%;
top: 20%;
right: 0%;
bottom: 50%;
border: 0px solid #CC3300;
background-color: #9BD094;

}
.menu {
	width:199px;
	margin: 0;
	list-style: none;
	padding: 15px 0;
	border-right: 1px solid #94A9E6;
	text-align: right;
}
.menu li {
	position: relative;
	right: -3px;
}
.menu a {
	display: block;
	text-decoration: none;
	border-right: 5px solid;
	padding: 5px 10px 5px 0;
	background: #fff;
	color: #000;
}
.menu a:link, .menu a:visited {
	border-color: #94A9E6;
}
.menu a:hover, .menu a:focus, .menu a:active {
	border-color: #2B4279;
}

</style>
</head>

<body>

fff

<div id="main">
uuuu


	<div id="middle">		middle
	<ul class="menu">[*]Link1[*]Link2[*]Link3[*]Link4[*]Link5[/list]
	</div>
	rrrtttt
</div>

</body>
</html>