Internet Explorer 7 Doesn’t Layer Properly

closeThis post was published 13 years 10 months 9 days ago. A number of changes have been made to the site since then, so please contact me if anything is broken or seems wrong.

In the process of developing a new website I have, I discovered a major flaw in Internet Explorer 7 (IE7) that shows itself when a floated element has background-color: transparent set in the CSS properties. It appears that if the element is floated inside another element with an opaque background, that background becomes transparent also in the area under the transparent element, effectively showing the page background. I have tested this with tiled image backgrounds, however it may show up in colored backgrounds as well.

I spent about two hours tonight alternately searching for solutions on Google and discussing the problem with another designer. Neither of us came up with a solution. Nevertheless, this issue needs to be fixed, or else I will be forced to come up with some completely new colors for the site I’m designing, just so IE7 doesn’t hide content that is the same color as the page background but should be on a different color.

Update: I just fixed the problem by removing an unnecessary fix CSS rule, which was actually the source of the problem.


I am an avid technology and software user, in addition to being reasonably well-versed in CSS, JavaScript, HTML, PHP, Python, and (though it still scares me) Perl. Aside from my technological tendencies, I am also a theatre technician, sound designer, violinist, singer, and actor.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail (or subscribe without commenting)

Comments are subject to moderation, and are licensed for display in perpetuity once posted. Learn more.