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

IE8 boxes with shadows get black outlines?
http://css3pie.com/forum/viewtopic.php?f=3&t=1950
Page 1 of 1

Author:  yuka123 [ Wed Jan 16, 2013 5:40 am ]
Post subject:  IE8 boxes with shadows get black outlines?

Hi,

div.panel {
background: -moz-linear-gradient(center top , #FFFFFF 0%, #F4F4F4 100%) repeat scroll 0 0 transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
margin: 0 0 20px;
padding: 20px 20px 2px;
}

I have this box, and after adding behaviour PIE.htc to it, in internet explorer 8 i get a black outline instead of the normal shadow.

In ie7 however the shadow is normal. What could be the problem? If you want pictures of the problem, ask me.

Re.

Author:  jason [ Wed Jan 16, 2013 6:19 pm ]
Post subject:  Re: IE8 boxes with shadows get black outlines?

Pictures would help, or better yet a URL.

Note that rgba alpha doesn't work for shadows with blur.

Author:  yuka123 [ Thu Jan 17, 2013 4:37 am ]
Post subject:  Re: IE8 boxes with shadows get black outlines?

I uploaded screens, since my web is not live and no way doing it so at the moment. I don't know why this happens. Notice the black outline in IE8 and normal shadow in IE7.

Attachments:
File comment: This is set to IE7 standard mode via F12.
ScreenShot008.png [24.91 KiB]
Not downloaded yet
File comment: this is how the box looks like in firefox.
ScreenShot006.png [26.49 KiB]
Not downloaded yet
File comment: This is Internet Explorer 9 set on IE8 standard mode via F12. Notice black outline that pie does.
ScreenShot007.png [34.01 KiB]
Not downloaded yet

Author:  yuka123 [ Thu Jan 17, 2013 4:46 am ]
Post subject:  Re: IE8 boxes with shadows get black outlines?

Another example posted screenies. See after clicking refresh 5 times, it renders normally. How to solve this?

.mytabs {
background-color: #F8F8F8;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 6px #C3C3C3;
height: 468px;
margin-bottom: 20px;
margin-top: 15px;
overflow: hidden;
position: relative;
text-transform: uppercase;
width: 100%;
behavior: url(../assets/js/pie/PIE.htc);
}

This is the main part of css

Attachments:
File comment: After pressing Refresh (f5) like 5-6 times.. it renders normally..
ScreenShot010.png [32.63 KiB]
Not downloaded yet
File comment: Another example.. first time i open this page containing this element. It show such border (grey).
ScreenShot009.png [37.65 KiB]
Not downloaded yet

Author:  yuka123 [ Thu Jan 17, 2013 6:16 am ]
Post subject:  Re: IE8 boxes with shadows get black outlines?

works normal using the javascript version of PIE , so it must be some load timing problem when execution of jquery and rest of js happens, basicly PIE has to be the last step judging by princip i used to load the JS version. But seems that .htc inside css does this before some other js\jquery happens. This might be the problem

Author:  jason [ Thu Jan 17, 2013 9:34 pm ]
Post subject:  Re: IE8 boxes with shadows get black outlines?

The IE8 mode in IE9's developer tools isn't an accurate rendering, I've seen users with all sorts of strange rendering issues trying to use it. You really should be testing in a real IE8 install, it's very possible that your black outline issue is an artifact of the fake IE8.

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