Fri, 2007-01-26 18:00
I posted about this below but my question was posed very vaguely, so pardon me while I try again.
I have this page that renders fine in FF and IE6. I'm using a series of nested
tags to create the drop shadow. The second outermost (after the tag contains an PNG image placed at the bottom and right of the
. The next
is a container meant to hold together the rest of the page's elements.
In IE7, when you resize the window, the
containing the PNG correctly moves to recenter itself in the view port. However, the container div doesn't budge! It does eventually "jump" to the right place when you mouse around the page.
I've narrowed down the problem to the way I'm using relative position to shift the container div and expose the drop shadow.
Is there anyway to fix this? Alternatively, is the a method for a drop shadow that doesn't use position: relative?
html
...
etc...
css
html {
background-image: url(../images/e3-bg.jpg);
background-repeat: repeat;
margin-bottom: 25px;
}
body {
width: 900px;
margin: 4px auto auto auto;
text-align: center;
}
.dropShadow {
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
width: 900px;
padding: 0px;
text-align: left;
}
div#container {
position:relative;
bottom:7px;
right: 7px;
padding-bottom:5px;
margin: 0 auto;
background-color:#FFF;
width: 900px;
}
Thanks for any insight. I'm pulling my hair out in frustration!
