Forums
View unanswered posts | View active topics It is currently Wed Oct 22, 2014 9:22 am



Reply to topic  [ 2 posts ] 
 Boxshadow on div with no background color 
Author Message

Joined: Mon Oct 11, 2010 1:34 am
Posts: 1
Post Boxshadow on div with no background color
Hello,

When I try to place a box shadow on a div with no background the shadow color shows up in the div, this is only an issue on IE (6-8).
FF, Chrome and Safari show the shadow on the outside of the div not on the inside.
Here is a screen shot:
Image

Here is the code:
Code:
<!DOCTYPE html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>TEST</title>
 <style type="text/css">
 body{
   font-size: 14px;
   font-family:Arial, Helvetica, sans-serif;
   font-weight:normal;
   background:url(spotlight.jpg) top center;
}
#Wrapper{
   width: 960px;
   margin: 0 auto 0 auto;
   color: #FFF;   
}
#Menu{
   height: 30px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius:  10px 10px 10px 10px;
    -webkit-box-shadow: #FFF 0 0 5px;
    -moz-box-shadow: #FFF 0 0 5px;
    box-shadow: #FFF 0 0 5px;
   margin-bottom: 10px;
   behavior: url(/PIE.htc);
}

#Menu2{
   height: 30px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius:  10px 10px 10px 10px;
    -webkit-box-shadow: #FFF 0 0 5px;
    -moz-box-shadow: #FFF 0 0 5px;
    box-shadow: #FFF 0 0 5px;
   margin-bottom: 10px;
   behavior: url(/PIE.htc);
}
#Menu3{
   height: 30px;

    -webkit-box-shadow: #FFF 0 0 5px;
    -moz-box-shadow: #FFF 0 0 5px;
    box-shadow: #FFF 0 0 5px;
   margin-bottom: 10px;
   behavior: url(/PIE.htc);
}
#Menu4{
   height: 30px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius:  10px 10px 10px 10px;
   border: 2px solid #FFF;
   margin-bottom: 10px;
   behavior: url(/PIE.htc);
}

</style>
</head>
<body>
<div id="Wrapper">
   Div with box shadow and rounded corners,  no background color:
   <div id="Menu">
       
    </div>
   
   Div with box shadow and rounded corners,  no background color, but using a clear 1px gif image:
   <div id="Menu2">
       
    </div>
   Div with box shadow,  no background color:
   <div id="Menu3">
       
    </div>
    Div with rounded corners and a 2px white border,  no background color:
   <div id="Menu4">
       
    </div>
 
</div>

</body>


and here is a example link:
http://playinsports.com/test.html

Is there any way to get IE to display like FF/Chrome/Safari?


Mon Oct 11, 2010 2:30 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Boxshadow on div with no background color
Known issue: http://github.com/lojjic/PIE/issues/#issue/12


Mon Oct 11, 2010 4:29 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 4 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.