On Tue, Apr 10, 2012 at 12:16 AM, Debbie Campbell
d...@redkitecreative.com wrote:
In this page in IE 8/7:
http://www.redkitecreative.com/projects/tax/
The background images in the three blue boxes are out of position. Even
putting the CSS style into the ie8.css stylesheet makes the background
images disappear from the page completely... How do I get them to move up in
IE 8 and 7?
I was able to get the desired placement in IE8 by adding the following
properties to the CSS for div.blue-box-content:
position: absolute;
top: 0;
left: 0;
width: 100%;
The box is positioned absolutely in relation to div.blue-box because that box
already has position:relative.
Since the box doesn't actually contain anything, you have to tell it how big to
be. You already have height:310px set in your stylesheet, so I only needed to
set its width.
In IE8, the background-position properties are being interpreted properly, but
the position of div.blue-box-content is determined differently. In most
browsers, div.blue-box-content is at the top left corner of div.blue-box, but in
IE8 it's below the H3 text. So, the background image is placed 112px from the
top of the div.blue-box-content like it's supposed to be, but the div itself is
in the wrong place.
I figured all of this out using the Developer Tools built into IE9. I was able
to see the problem immediately when I set a background-color on
div.blue-box-content.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
--
Debbie
www.redkitecreative.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
