image-shadow behind the main div - css

Question

I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!

Answer 1

Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.