css3 PIE adding shadow to all elements on page

igloobob
igloobob used Ask the Experts™
on
Hello,

I have a site just built, tried adding css3 PIE to make the drop shadow on the page work properly - no direction, just nice and even all the way around the page. The main site I have removed it for now but this test page has it on. If you look at this page in FF etc you can see it is correct, in IE however it seems to apply the shadow to almost all elements on the page?!

It does make the main page drop shadow exactly as I wish but it is just adding a bottom and right shadow onto loads of elements on the page.

http://www.dynamic-tiling.co.uk/test.html

Any ideas why this is and how I can fix it? The drop shadow in IE without PIE is gash as it has the direction so only shows right and bottom edges. I tried just changing the direction values instead of using PIE but no joy.



Any help gratefully received!!


.Page {width: 960px;height:auto;padding:20px;text-align: left;margin: 20px auto 0 auto; background:#ffffff;

-moz-box-shadow: 0px 0px 5px #666;
	-webkit-box-shadow: 0px 0px 5px #666;
	box-shadow: 0px 0px 5px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666');
	
		behavior: url(../PIE.htc);
	position:relative;
	
	}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
It seems to be a position bug.  

Read this: http://www.htmlgoodies.com/beyond/css/article.php/3921576/The-CSS3-PIE-Needs-Time-to-Bake.htm 

All you'll have to do is add position:relative to anything  you do not want the shadow on.

Author

Commented:
oooh cool thanks I'll have a look at that tomorrow, got to leave for the day now.

thanks!

Author

Commented:
Well that certainly fixes it in IE 8 but the same thing is still happening in IE 7 and IE 6. Not bothered about IE 6 really but IE 7 I am of course.

http://www.dynamic-tiling.co.uk/test.html

Any ideas? Gutted if I'll just have to let IE have crap drop shadows on right and bottom rather than the lovely subtle one equal on all edges of the page as it displays in all the other browsers :(

thanks for the help
LZ1
Top Expert 2011

Commented:
I did test it in IE 7 & 8 and it looks great to me.  I was on IE 8 with compatibility mode yesterday. Today I'm on IE 9 with compatibility and every mode I checked seems good.

Author

Commented:
hmm, I only have IE tester and those shadows are all over the place in IE 7 on there. maybe my tester is goosed. I'll have a proper look into it on monday, can't be doing with wrestling with IE on a weekend - it's time to go out ha ha!!

thanks for the help, will report back on monday....
LZ1
Top Expert 2011

Commented:
I totally understand.  I'll be back on Monday as well.

Author

Commented:
hope you had a good weekend!

have been trying again, IE 7 is still showing those shadows for me both on IE tester on my vista machine and also using IE net renderer. What platform were you viewing IE 7 and it looked fine?

http://ipinfo.info/netrenderer/index.php

http://www.dynamic-tiling.co.uk/test.html

 screen grab from net renderer
LZ1
Top Expert 2011

Commented:
I'm on IE 8/7 in XP now. I am seeing them back in IE 7.  Very strange.  Let me see what else I can find on it. I noticed you do have the position:relative on all the appropriate parent elements, but I'm still uncertain as to why it's throwing all those shadows.

Author

Commented:
thanks very much for taking a look!

LZ1
Top Expert 2011

Commented:
Well, I have to say I am stumped. My only 2 suggestions would be to not use the pie htc, or to post a question on their forum.  I have not found much help as it relates to the box-shadow part.  There's no real reason that the shadow should be progressing through all the elements.

The really weird thing is, when I tried it locally, it worked fine in all browsers.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="keywords" content="tiler, tiling, tiles, bury, greater manchester, lancashire, bathrooms, kitchens, floors, wetrooms"/>

<meta name="description" content="Dynamic Tiling provide tiling services for jobs of any size in both the domestic and commercial market. We provide tiling services for bathrooms, kitchens, floors and any other area you require."/>

<title>Dynamic Tiling | Bathrooms | Wet Rooms | Kitchens | Floors | Bury | Greater Manchester | Lancashire</title>

<link rel="shortcut icon" href="favicon.ico"/>


<style>


/* global reset stylesheet */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: #000;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* end global reset stylesheet */



/* main content elements */

* {
	padding: 0px;
	margin: 0px;
}

img {
border:none!important;
	padding: 0px!important;
	margin: 0px!important;
}

a {
border:none;
outline: none;
}


html { min-height: 101%; margin-bottom: 1px; }







/* main content elements */









body {
	padding:0px;
margin: 0 0 0em 0;
	text-align:center; 
	background:url(http://www.dynamic-tiling.co.uk/images/backgrounds/tiles1.gif) repeat;;
}






/* main content elements */






.Page {width: 960px;height:auto;padding:20px;text-align: left;margin: 20px auto 0 auto; background:#ffffff;

-moz-box-shadow: 0px 0px 5px #666;
	-webkit-box-shadow: 0px 0px 5px #666;
	box-shadow: 0px 0px 5px #666;
	/* For IE 8 */
	-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666');
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666');
	
		behavior: url(../PIE.htc);
	position:relative;
	
	}




.Banner {width: 960px;height:25px;text-align: left;margin: 0px 30px 20px auto; border-bottom:solid 1px #999;position:relative;}



.nav {
float:right;height:auto;display:block;position:relative;}



.nav ul li {width:auto;height:auto;float:left; border-top:solid 1px #999 !important; border-left:solid 1px #999 !important; border-right:solid 1px #999 !important; text-align:center;margin-left:5px;display:block;list-style:none; padding:0!important;position:relative;}

.nav ul li a {float:left;display:block;padding:5px 8px 5px 8px!important; margin:0px!important;background-color:#fff; font-family: Arial, Helvetica, sans-serif;	font-size: 14px;color: #666;text-align: center;font-weight:normal; text-decoration:none!important;list-style:none;height:auto;overflow:hidden;position:relative;}



.nav ul li a:hover {float:left;display:block;padding:5px 8px 5px 8px!important; margin:0px!important;background-color:#fff; font-family: Arial, Helvetica, sans-serif;	font-size: 14px;color: #ff9933;text-align: center;font-weight:normal; text-decoration:none!important;list-style:none;height:auto;position:relative;}

.nav ul li a:active {float:left;display:block;padding:5px 8px 5px 8px!important; margin:0px!important;background-color:#ff9933 !important; font-family: Arial, Helvetica, sans-serif;	font-size: 14px;color: #333;text-align: center;font-weight:normal; text-decoration:none!important;list-style:none;height:auto;position:relative;}





.nav ul li span a {float:left;display:block;padding:5px 8px 5px 8px!important; margin:0px!important;background-color:#ff9933; font-family: Arial, Helvetica, sans-serif;	font-size: 14px;color: #fff;text-align: center;font-weight:normal; text-decoration:none!important;list-style:none;height:auto;position:relative;}

.nav ul li span a:hover {float:left;display:block;padding:5px 8px 5px 8px!important; margin:0px!important;background-color:#ff9933; font-family: Arial, Helvetica, sans-serif;	font-size: 14px;color: #fff;text-align: center;font-weight:normal; text-decoration:none!important;list-style:none;height:auto;position:relative;}


.BannerIMG {width: 960px;height:250px;text-align: left;margin: 20px 0 20px 0; background-color:#ffffff;position:relative;}


.Content {width: 960px;height:auto;text-align: left;margin: 0px; background-color:#ffffff;position:relative;}




.logo {width:960px;height:20px;margin-bottom:10px !important;position:relative;}

.strapline {float:left;height:20px;position:relative;}

.certs {height:56px;margin-bottom:20px !important;position:relative;}


.line {clear:left;overflow: hidden; margin-bottom:20px;background-color:#ffffff;position:relative;}

.links {clear:left;overflow: hidden; margin-bottom:20px;padding-top:20px;border-top:solid 1px #999;background-color:#ffffff;position:relative;}


.title {height:30px;margin-bottom:10px!important;position:relative;}

.introBox {height:200px;background-color:#ffffff;position:relative;}


.singleColLeft {float:left; width:300px;margin-right:30px;background-color:#ffffff;position:relative;}

.doubleColLeft {float:left; width:630px;margin-right:30px;background-color:#ffffff;position:relative;}

.singleColRight {float:left; width:300px;background-color:#ffffff;position:relative;}

.doubleColRight {float:left; width:630px;background-color:#ffffff;position:relative;}



.Footer {width: 960px;height:40px;text-align: left;margin:20px auto 0 auto;border-top:solid 1px #999;background-color:#ffffff;position:relative;}




/* text */



h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height:1.2;
	color: #ff9933;
	text-align: left;
	font-weight:normal;
	
	
	
}






p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height:1.4;
	color: #666;
	text-align: left;
	font-weight:normal;
	
	
	
}





p a {font-family: Helvetica, Arial, sans-serif;text-decoration:none;color:#ff9933;}


p a:hover {font-family: Helvetica, Arial, sans-serif;text-decoration:none;color:#333333;background:orange;}


p.footerL {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height:1.4;
	color: #999999;
	text-align: left;
	font-weight:normal;
	padding-top:10px;
	float:left;
	
	
}


p.footerR {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height:1.4;
	color: #999999;
	text-align: right;
	font-weight:normal;
	padding-top:10px;
	float:right;
	
	
}


p.footerR a {font-family: Helvetica, Arial, sans-serif;text-decoration:none;color:orange;}


p.footerR  a:hover {font-family: Helvetica, Arial, sans-serif;text-decoration:none;color:#333333;background:#ff9933;}

/* SKYPE NUMBER FIX */




span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

</style>
<!--[if lt IE 7]>
        		<script type="text/javascript" src="http://www.dynamic-tiling.co.uk/js/unitpngfix.js"></script>
	<![endif]-->


<link rel="stylesheet" href="http://www.dynamic-tiling.co.uk/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.dynamic-tiling.co.uk/css/custom-nivo-slider.css" type="text/css" media="screen" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://www.dynamic-tiling.co.uk/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script src="http://www.dynamic-tiling.co.uk/js/functions.js" type="text/javascript"></script>

<meta name="google-site-verification" content="XI07yc2Ha8FGRSm3HWAEkoAovb6Ym2oXrwm0LdAViUc" />
</head>

<body>

	
<div id="wrapper">			
<div class="Page">
                        
                            
        <a href="index.html"><img class="logo" src="http://www.dynamic-tiling.co.uk/images/DynamicTilingLogo.gif" alt="Dynamic Tiling Logo" /></a>
        
        
          <div class="Banner">
     

     
     
    
       <img class="strapline" src="http://www.dynamic-tiling.co.uk/images/strapline.gif" width="500" height="20" alt="Top quality domestic and commercial tiling services" /> <div class="nav">

                    
                            
                            
                             <ul>
                                     <li><span><a href="index.html">Home</a></span></li>
                                   
                               
                                 
                                 
                                 <li><a href="services.html">Services</a></li>
                                 
                                 <li><a href="bathrooms.html">Bathrooms</a></li>
                                 
                                 <li><a href="kitchens.html">Kitchens</a></li>
                                 
                                 <li><a href="floors.html">Floors</a></li>

                              
                               
                             
							
							<li><a href="contact.php">Contact</a></li>
                             </ul>
                             
                             
                             
                            </div>
                            
                            
                   
     
     
     </div><!-- end of banner-->
     
        <div id="slider">
                        
                        
	<img src="http://www.dynamic-tiling.co.uk/images/banners/banner1.jpg" alt="Dynamic Tiling" />
	<img src="http://www.dynamic-tiling.co.uk/images/banners/banner2.jpg" alt="Dynamic Tiling" />
    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner3.jpg" alt="Dynamic Tiling" />

    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner4.jpg" alt="Dynamic Tiling" />
    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner5.jpg" alt="Dynamic Tiling" />
    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner6.jpg" alt="Dynamic Tiling" />
    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner7.jpg" alt="Dynamic Tiling" />
    <img src="http://www.dynamic-tiling.co.uk/images/banners/banner8.jpg" alt="Dynamic Tiling" />
</div><!-- end of slider-->





     


<div class="Content">    



 <div class="line">
 
 
	<div class="doubleColLeft">
		<p>
        Dynamic Tiling provide tiling services for jobs of any size in both the domestic and commercial market. We provide tiling services for bathrooms, wet rooms, kitchens, floors and any other area you require. We provide a service that is second to none giving you complete piece of mind that your job is in the hands of a highly skilled, motivated and qualified tiler who takes pride in any tiling job no matter what the size. Dynamic tiling are based in Bury, working in the Greater Manchester and Lancashire areas. <br />
<br />

Dynamic tiling also now offer plumbing services through a working partnership allowing us to offer complete installations for bathrooms and kitchens.
        
        
        <br />
<br />

For a quote, you can <a href="mailto:info@dynamic-tiling.co.uk">email us here</a>, or call on 07841 450 888 or  0161 761 7547.



</p>
	</div>
    
    
	<div class="singleColRight">
		<img src="http://www.dynamic-tiling.co.uk/images/certs.gif" alt="certificates" />
       <p><br />
We are ceramic and natural stone specialists, certified and approved so you can rest assured Dynamic Tiling will provide you with a service second to none. </p>
        
        
	</div>
    
    
</div><!-- end of line-->


  <div class="links">

		<div class="singleColLeft">
		  <a href="bathrooms.html"><img src="http://www.dynamic-tiling.co.uk/images/links/bathrooms.jpg" alt="bathrooms" /></a>

	</div>
    
    
    
		<div class="singleColLeft">
		 <a href="kitchens.html"><img src="http://www.dynamic-tiling.co.uk/images/links/kitchens.jpg" alt="kitchens" /></a>

	</div>

    
    
    
		<div class="singleColRight">
		 <a href="floors.html"><img src="http://www.dynamic-tiling.co.uk/images/links/floors.jpg" alt="floors" /></a>

	</div>
  
		
	
		

</div><!-- end of links-->


<a href="contact.php"><img src="http://www.dynamic-tiling.co.uk/images/CTA.gif" width="960" height="30" alt="Contact us now to arrange a quote" /></a>




</div><!-- End of content--> 
 
 
 
 <div class="Footer">

 
 <p class="footerL">Copyright ©2011 Dynamic Tiling<br />
Site by: <a href="http://www.studiosmith.co.uk/">StudioSmith</a></p>
 
 
 <p class="footerR">
 <a href="index.html">Home</a> |

 
 <a href="services.html">Services</a> |
 
 <a href="bathrooms.html">Bathrooms</a> |
                                 

<a href="kitchens.html">Kitchens</a> |
                                 
<a href="floors.html">Floors</a> |
 
 <a href="contact.php">Contact</a>

 
 </p>
 
 
 </div><!-- end of footer -->
          
          
          
          
          
</div><!-- End of page -->
</div><!-- End of wrapper -->

</body>
</html>

Open in new window

Commented:
thanks LZ1

I posted on the PIE forum, the reason was I was also including IE filters for the shadow, removed these and it's fine now!!



.Page {width: 960px;height:auto;padding:20px;text-align: left;margin: 20px auto 0 auto; background:#ffffff;

-moz-box-shadow: 0px 0px 5px #666;
      -webkit-box-shadow: 0px 0px 5px #666;
      box-shadow: 0px 0px 5px #666;
      
behavior: url(../PIE.htc);
      position:relative;
      
      }

Author

Commented:
found the answer on another forum and posted it here
LZ1
Top Expert 2011

Commented:
Glad you got it

Author

Commented:
thanks for the help LZ1!

Author

Commented:
trying to accept your suggestion to check the PIE forum as a multiple answer and award some points but it won't let me now sorry, think it is closed or something.
LZ1
Top Expert 2011

Commented:
It is. No big deal though. Glad we got it figured out.

Author

Commented:
thank you for the help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial