transparent background does not load properly in IE7

@ http://tiny.cc/qtOll the transparent content box does not load or show properly as the content background in Internet Explorer 7. There is some space at the bottom. Why is that?
See screenshot
content-box-issue-ie7.jpg
rhandalthorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rhandalthorAuthor Commented:
And when I press F11 to enlarge the screen the transparent background covers the entire content box again. Very strange indeed! Any ideas what's the matter?
0
David S.Commented:
This issue stopped showing up for me, but here's something you can try:
*:first-child+html .overlay-blog {
  height: auto;
}

Open in new window

0
rhandalthorAuthor Commented:
Doesn't really seem to make a difference. On http://lab.imagewize.net/klarezaken/2009/07/06/wordpress-installeren/ the read more is even ignored in IE7 and the text overflows..
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

rhandalthorAuthor Commented:
Oh read more is just ignored cross browser. Well never mind this issue..
0
rhandalthorAuthor Commented:
Hmm well transparent background still recoils on most pages and the blog. For the other readmore not showing in IE7 (It does show in IE7) I will open another ticket.
0
rhandalthorAuthor Commented:
I view the site in IE8 Compatibility moe. In regular IE8 mode all is fine. Maybe everything is fine in regular IE7 as well...?
0
David S.Commented:
I looked at it again in IE7 and the issue did appear.

Try giving "div.content" min-height:1px
0
rhandalthorAuthor Commented:
I added the code, but I do not think it is working yet. Please have a look. This is really strange and something I hope to solve as soon as possible. Planned to go live tomorrow...
/* IE& bizarre transparent box issue */
*:first-child+html .overlay-blog {
  height: auto;
}
 
div.content {min-height:1px;}

Open in new window

0
David S.Commented:
Hmm... try this then:
html>body #trans-box-blog {
  height: 365px;
  padding: 0 10px;
}
#trans-box-blog>div.content {
  padding: 10px 0;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rhandalthorAuthor Commented:
Added the the code to ie-hacks.css (loaded by <!--[if gte IE 6]>) and... it seems to be working. I just double check it all and post back.
0
rhandalthorAuthor Commented:
Well it is working. Just a little paranoid that's all. Thanks a lot once again. Why it works now I have to get in a bit more later. But the main thing for now is that it works and that the lay-out seems to be the same or 99.9% the same cross-browser.
0
David S.Commented:
You're welcome.

It seems that IE7 was miscalculating what height:100% should be on that absolutely positioned element because of the top and bottom padding on its parent element. I would assume it got confused because height:100% is calculated a little differently on absolutely positioned elements than other elements. On absolutely positioned elements the top and bottom padding should be added to the computed height of the containing block to get the height for the element.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.