I’m having a bit of a problem with a very weird side effect that’s happening to me in IE compatibility mode/IE7.
I am using a transparent png background on the content divs on my site – white, on top of the page background image so as it show through slightly.
I consider myself competent competent with HTML and CSS but cannot for the life of me find a resolution to this.
The web page in question is http://www.freezeframedesign.com/blog. It only occurs in IE7 and IE compatibility mode – you will see the background for each article looks as if the background image has layered up on top of itself, compared to the appearance on all other pages on the site.
The CSS for the element is
.studioarticle{
padding:20px;
background:url(/siteimages/back_white.png);
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 7px -2px #111;
box-shadow:0px 0px 4px #000;
}
(I’m aware the box-shadow property won’t work here)
It’s all pretty standard stuff. If I use the IE developer inspector and unstick the background image, it disappears completely, so it’s not as if another element is somehow getting the background image too.
Please, if anyone could have a look at the source and see if they can find the source of the issue, or if anyone has had the problem before, please let me know what I might do to solve this!
I know not many people these days use IE7, but as a web designer I want to ensure my site is still presentable to every minority.
Thanks very much for your help!
You have a margin -7px 0 0 in the studiotitle class. Take that out and it will work.
A negative number for margins or paddings is always a big red flag in my experience.