CSS3 PIE Forums
http://css3pie.com/forum/

Global CSS Background Color Causing Problem in IE7
http://css3pie.com/forum/viewtopic.php?f=3&t=1725
Page 1 of 1

Author:  JamieJackson [ Wed Jul 18, 2012 12:54 pm ]
Post subject:  Global CSS Background Color Causing Problem in IE7

In IE7 (IE7 mode of IE9, that is), the inner divs' shadows disappear, apparently because of a background color defined in the site's global CSS.

Without modifying that global style (if possible), how would I make the backgrounds appear for the inner divs in IE7?

Thanks,
Jamie

Code:
<!DOCTYPE html>
<html>
<head>
   <meta charset=utf-8 />
   <title></title>
   <style>
   /* global css */
   html, body {
       background: #FFFFEF;
   }
   /* my experiment */
   .shadow {
      background-color: white;
      border: 1px solid #00477f;
       box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
       -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
       -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
       behavior: url(PIE.htc);
   }
   .inner {
      margin: 10px;
      float: left;
   }

   #outer-jj {
      height: 150px;
   }

   #inner-jj-1 #inner-jj-2 {
      height: 100px;
   }
   </style>
</head>
<body>

   <div class="shadow" id="outer-jj">
      <p>Hi, this is inside outer-jj.</p>
      <div class="shadow inner" id="inner-jj-1">
         <p>Hi, this is inside inner-jj-1.</p>
      </div>
      <div class="shadow inner" id="inner-jj-2">
         <p>Hi, this is inside inner-jj-2.</p>
      </div>
   </div>
</body>
</html>

Author:  JamieJackson [ Thu Jul 19, 2012 1:12 pm ]
Post subject:  Re: Global CSS Background Color Causing Problem in IE7

Actually, according to IETester, the problem happens in anything less than IE9.

Author:  jason [ Sat Jul 21, 2012 6:23 pm ]
Post subject:  Re: Global CSS Background Color Causing Problem in IE7

http://css3pie.com/documentation/known-issues/#z-index

Author:  Anapotheque [ Tue Oct 23, 2012 6:16 am ]
Post subject:  Re: Global CSS Background Color Causing Problem in IE7

Hi,

I have the same probleme with IE7-8 and i have make a great correction ; ))

Easy Way :

Code:
<!--[if IE 8]>
<style>
   .your_component_with_background_color{
      position : relative;
   }
</style>
<![endif]-->


Hard Way

And to your content with background-color this code :
Code:
<!--[if IE 8]>
<style>
   .your_component_with_background_color{
      border          : 1px solid white;
      border-radius      : 1px;
           -moz-border-radius   : 1px;
      -webkit-border-radius   : 1px;
      behavior          : url(/path_from_your_html_page/PIE.htc);
   }
</style>
<![endif]-->


i have use the second way because i have a composant doesn't show on IE7 with back div with position : relative.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/