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/
