Avatar of igloobob
igloobob
Flag for United Kingdom of Great Britain and Northern Ireland asked on

css3 PIE adding shadow to all elements on page

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

CSS

Avatar of undefined
Last Comment
igloobob

8/22/2022 - Mon
LZ1

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.
igloobob

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

thanks!
igloobob

ASKER
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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
LZ1

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.
igloobob

ASKER
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

I totally understand.  I'll be back on Monday as well.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
igloobob

ASKER
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

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.
igloobob

ASKER
thanks very much for taking a look!

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
LZ1

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

ASKER CERTIFIED SOLUTION
igloobob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
igloobob

ASKER
found the answer on another forum and posted it here
LZ1

Glad you got it
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
igloobob

ASKER
thanks for the help LZ1!
igloobob

ASKER
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

It is. No big deal though. Glad we got it figured out.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
igloobob

ASKER
thank you for the help