If I take out margin-top:110px; then the div and text (which I'd like to have the semi transparent background on) goes to the top of the containing div on all browsers.

With behavior: url(/css3pie/PIE.htc); in .boxDescription then in IE7 it seems to ignore the margin-top:110px; and go to the top. In IE8 it stays where it should be. Both don't have the semi transparent background.

If I remove behavior: url(/css3pie/PIE.htc); from .boxDescription, IE7 and IE8 show the .boxDescription text where it should be. In IE7 there is no semi transparent background and in IE8 it shows the solid black background colour (which I could live with).

I've tried adding the behavoir to different elements, as was suggested for a previous issue, however I've not got it to work yet.

The misalignment definitely sounds like a hasLayout issue. You can find other topics in this forum around this, but basically IE<8 will remove top margins from elements with hasLayout, if there is an absolute-positioned previous sibling. Since PIE adds such a previous sibling, boom your margin goes away.

There are different ways to get around this (use padding on a parent rather than top margin, etc.) but the bottom line is this is an IE bug that you'll have to work around. PIE isn't the cause, just the trigger.

Thu Oct 06, 2011 2:52 pm

neebster

Joined: Mon Oct 03, 2011 8:00 amPosts: 5

Re: Putting RGBA opacity on top of a background image

All fixed. Many thnaks for your help in working out what was going on.

My apologies for some of the problem being related to one of the common issues. I had read them, but just didn't click that this issue was connected.

Adding position:relative to .boxDescription got the semi transparent background back and I removed the margin-top:110px; from .boxDescription and added a new surrounding div with the class padding-top:110px;.

Who is online

Users browsing this forum: Exabot [Bot] and 5 guests

You cannot post new topics in this forumYou cannot reply to topics in this forumYou cannot edit your posts in this forumYou cannot delete your posts in this forumYou cannot post attachments in this forum