Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 11:54 pm



Reply to topic  [ 4 posts ] 
 Global CSS Background Color Causing Problem in IE7 
Author Message

Joined: Wed Jul 18, 2012 12:48 pm
Posts: 2
Post 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>


Wed Jul 18, 2012 12:54 pm
Profile

Joined: Wed Jul 18, 2012 12:48 pm
Posts: 2
Post Re: Global CSS Background Color Causing Problem in IE7
Actually, according to IETester, the problem happens in anything less than IE9.


Thu Jul 19, 2012 1:12 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Global CSS Background Color Causing Problem in IE7
http://css3pie.com/documentation/known-issues/#z-index


Sat Jul 21, 2012 6:23 pm
Profile

Joined: Tue Oct 23, 2012 3:28 am
Posts: 1
Post 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.


Tue Oct 23, 2012 6:16 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 3 guests


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

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.