Box shadow problem in IE 8-9

I want to place CSS drop shadows on different objects on a web page. It works perfectly in Safari, FF, Chrome and Opera both in Widows and OS X, but fails in IE 8 & 9. Any help would be much apreaciated. VL Branko
Here is the CSS:
/* this is for putting drop shadows on images that are placed in the text area which is generally white or very light colored */
.dropshadowtext {
-moz-box-shadow: 5px 5px 8px #999; /* Firefox */
-webkit-box-shadow: 5px 5px 8px #999; /* Safari/Chrome */
box-shadow: 5px 5px 8px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#999999)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#999);/* IE 5.5 - 7 */
/* this is for putting drop shadows on images that are placed in areas other than the text area  */
.dropshadowbackground {
-moz-box-shadow: 6px 6px 5px #35454c; /* Firefox */
-webkit-box-shadow: 6px 6px 5px #35454c; /* Safari/Chrome */
box-shadow: 6px 6px 5px #35454c; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c);/* IE 5.5 - 7 */
/* this is for putting a drop shadow under the area where there text is written color of shadow will depend on the background*/
.dropshadowunderwritingarea {
-moz-box-shadow: 6px 6px 5px #35454c; /* Firefox */
-webkit-box-shadow: 6px 6px 5px #35454c; /* Safari/Chrome */
box-shadow: 6px 6px 5px #35454c; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c);/* IE 5.5 - 7 */

I was away for a few days hence late reply. I removed the MS filters from the CSS but it still didn't work in IE9 when I check in browser lab.
I see that you have a demo of how to do it for various versions of IE at
http://alt-web.com/DEMOS/CSS-Shadows.shtml
It worked when I checked in browser labs. Are you no longer recomending this? How would you implement it in CSS?
As for the validation errors they seem to be artifacts left over when  converting from Adobe Golive to Dreamweaver. More deadwood to clean out.

Similar Messages

  • I want to do a border-radius with box shadow and it doesn't work, why?

    This should be simple but it's not working and I don't know why. I think the problem is in the html.
    I simply want to have a div with an image inside that is circular and has an inset shadow and is centered on the page.
    /*here is my css*/
    #div3 {
    -webkit-margin:25px auto;
    -webkit-border-radius:50%;
    .box-shad{
    -webkit-box-shadow: 15px 15px 15px #8 inset;
    <!-- here is my html -->
    <body>
      <div class="gridContainer clearfix">
      <div id="div3" class="fluid"><div class="box-shad"><a href="index.html"><img src="images/Big-tree-trans1.png" width="900" height="700" alt=""/></a></div>
      </div>
    </body>
    Here is my website: www.adjacentdimensionsmedia.com

    I want a different drop shadowed image on each page. Is there a way to do that?
    Sure.  Copy & paste the following code into a new, blank document.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    <style>
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    img {
        max-width: 100%;
        vertical-align: baseline
    body { background: #069 }
    header, footer {
        clear: both;
        width: 100%;
        padding: 0 2%;
        background: #CCC;
        color: #000;
        min-height: 50px
    article {
        clear: both;
        width: 75%;
        min-height: 600px;
        padding: 0 2%;
        background: #FFF;
        color: #069;
        margin: 0 auto;
    .shadow img { box-shadow: 1px 3px 5px #333 }
    .radius img {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    .border img { border: 20px solid #069 }
    .center {
        text-align: center;
        margin: 0 auto
    </style>
    </head>
    <body>
    <header>Header</header>
    <article> <h1>Main content area</h1>
    <div class="shadow radius border center">
    <!--INSERT YOUR UNIQUE IMAGE BELOW-->
    <img src="http://placehold.it/500x325.jpg"> </div>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <p> </p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </article>
    <footer>Footer</footer>
    </body>
    </html>
    Nancy O.

  • Webkit box shadow causes massive performance issues

    when loading pages within the webkit container, those that have webkit box shadow end up scrolling really slow, and some pages end up more erratic than others.
    Here's a few pages:
    http://thenextweb.com (slow)
    http://ign.com (almost can't browse)
    http://shoemoney.com (shuts down the air app)
    Is there someway to disable html5/css3 features?
    Also, scrolling works for these sites on the Mac.
    Thank you for your help.

    Hello,
    I'm sorry for the delay, Adobe US just got back from our winter shut down.  I took a look at the website's you listed but unfortunately wasn't able to reproduce the problem on either Mac or Win using the following code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                creationComplete="init()">
         <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
         </fx:Declarations>
         <fx:Script>
              <![CDATA[
                   private function btn_click(evt:Event):void {
                        html.location = textInput.text;
                   private function init():void
                        html.location = textInput.text;
                   private function onLocationChange(evt:Event):void
                        trace(html.location);
              ]]>
         </fx:Script>
         <mx:VBox width="100%" height="100%">
              <mx:ApplicationControlBar dock="true" width="100%">
                   <mx:Form styleName="plain"
                              defaultButton="{btn}"
                              width="100%">
                        <mx:FormItem label="location:"
                              direction="horizontal"
                                        width="100%">
                             <mx:TextInput id="textInput"
                                              text="http://www.adobe.com/"
                                              width="100%" />
                             <mx:Button id="btn"
                                          label="Go"
                                          click="btn_click(event);" />
                        </mx:FormItem>
                   </mx:Form>
              </mx:ApplicationControlBar>
              <mx:HTML id="html"
                         width="100%"
                         height="100%"
                         locationChange="onLocationChange(event)"
                         verticalScrollPolicy="auto"/>
         </mx:VBox>
    </s:WindowedApplication>
    Do you have any sample code that would illustrate the problem you're seeing?  Is there a particular OS I should try?  Anything else you might think is relavent?
    Thanks,
    Chris

  • IE9 beta - Seven box-shadow is working

    Hello
    I just tested a page on my own desktop using IE9 Beta (Win 7 64 Pro)
    and the box-shadow property is well supported it seems.
    So maybe it's time to update the version in BrowserLabs, which is not
    displaying it...

    So, as promised here is the (slightly delayed) follow-up. We updated both IE9 and our screen capture utility so you should be able to see box-shadow working now in our screenshots there.
    Thanks for reporting this issue, we know it's important to our users that our screenshots be as accurate as possible and feedback like yours definitely helps.
    Keep in mind that IE9 is beta software so please report any other problems/inconsistencies you see - we are actively working to resolve issues like these.
    Thanks,
    Mark

  • IOS8 doesn't render CSS box shadows correctly

    According to an article at "caniuse", iOS7.1, 8, and 8.1 are supposed to support the CSS3 property box-shadow. However, I have an html file to which I could direct you which shows that this is not the case. The file I have is simple-minded, containing CSS only for the box-shadow in question. When presented in iOS8 Safari, no box-shadow is rendered. When presented in MacOS Safari, Firefox, Chrome, or Opera, the box-shadow is rendered correctly. Is this (and are other) iOS8 CSS3 limitations documented?

    It works for me, but its a little flaky when zooming in. It disappears after a certain zoom level is reached.

  • Photoshop Webkit Rendering not supporting box-shadow

    Hi there,
    I've created a panel with an HTML Widget. Inside I have some embeded html with some CSS3 styles applied to an element. All CSS3 properties are working fine except -webkit-box-shadow or box-shadow.
    Does Photoshop's Webkit rendering not support these properties? border-radius and background gradients work just fine.
    Thanks

    It's not on the list of webkit CSS properties supported in
    AIR:
    http://livedocs.adobe.com/air/1/devappshtml/AboutHTMLEnvironment_3.html

  • Is it possible to get a box shadow in at least IE 8?

    I hope this isn't a stupid or redundant question, but is check out this one page site. 
    www.juliaawebb.com 
    I'm not worried about IE 7, and some of you might shoot me, but is there a way to make the box shadows work in IE 8 for my top 2 middle boxes (one with phone number and the other with her name) AND the little Contact box?  In modern browsers they work great.  Is it just that the box shadow in my CSS is using RGB?  Like maybe the box shadow needs to be hex...?
    Any help would be super!   Thanks in advance...

    You must use IE conditional comments and filters.
    http://alt-web.com/DEMOS/CSS-Shadows.shtml
    Nancy O.

  • -webkit-box-shadow not working on Air

    -webkit-box-shadow not working on Air anyone know why that
    is?
    It works on Safari but if I add it to my Html/Ajax app in air
    its no go.

    It's not on the list of webkit CSS properties supported in
    AIR:
    http://livedocs.adobe.com/air/1/devappshtml/AboutHTMLEnvironment_3.html

  • Is it possible to add and adjust css3 box-shadow and its effects... color and transparency with mucow?

    Does this make sense on how to apply it?
    #{param_itemUID} .rect{
      background-color:{param_backgroundColor};
      width:{param_width}px;
      height:{param_height}px;
      -pie-box-shadow:{param_xshadow}px; {param_yshadow}px; {param_shadowblur}px; {param_ShadowColor};
      box-shadow:{param_xshadow}px;{param_yshadow}px;{param_shadowblur}px;rgba({param_ShadowCol or},{param_opacity});
    Thanks!

    You should be able to do those things with a mucow.
    If it's not working, could you share more of your mucow - maybe just send me the whole thing so I can take a look (lbushore (at) adobe.com)

  • Is there a way for converting this Photoshop drop shadow to CSS box shadow?

    Here's my PSD: http://d.pr/f/ML9l
    Here are the specs:
    Color: #3b5c7f
    Angle: 90 degrees
    Distance: 2px
    Size: 4px
    Contour: Linear
    Here's what I've come up with so far, and though quite similar, it is not exactly the same thing:
    http://jsbin.com/akuleg/1/

    Are you a Creative Cloud member? With the recent Photoshop update, you can use the tool "Copy CSS"
    It copies the style to the clipboard and you can paste it into your code. Here is what your file generated:
    .Shape_5 {
      border-radius: 3px;
      background-color: rgb( 228, 224, 223 );
      box-shadow: 0px 2px 4px 0px rgb( 59, 92, 127 );
      position: absolute;
      left: 56px;
      top: 123px;
      width: 287px;
      height: 54px;
      z-index: 2;
    Hope this helps!
    Julia

  • Box shadow not working in certain browsers

    Hello! I created a box shadow and I implemented code so it would show up in the popular browsers. I noticed though, the box shadow will not show up in Explorer and Mozilla. It does show up in Google Chrome and Safari. This is the code I added in. Am I missing something? Thanks.
    -webkit-box-shadow: 2px 1px 5px 7px #3FF;
    -moz-box-shadow: 2px 1px 5px 7px #3FF;

    What versions of those browsers (IE and Firefox) are you using?
    The bright green box shadow shows fine here, though Firefox no longer needs the -moz prefix so you should have a line for...
    box-shadow: 2px 1px 5px 7px #3FF;
    ...at the end of your browser prefix versions.
    Could it be a browser cache issue?

  • Firefox displays the CSS "outline:;" on the outside of "-moz-box-shadow:;".

    When using "outline" and "-moz-box-shadow" together, the outline is drawn on the outside or around the box shadow.
    ---Example:----------------
    <pre><nowiki>
    .box {
    outline:1px solid rgb(0,0,0);
    -moz-box-shadow:0 1px 5px rgb(90,90,90);
    }</nowiki></pre>
    Will this be fixed soon?

    Since this seems to have some search engine ranking. This is https://bugzilla.mozilla.org/show_bug.cgi?id=480888 open as of this comment.
    Please be considerate of developers time, don't comment on the bug unless you are offering to help fix it.

  • Photo border / shadow problem

    On iweb (and until recently on my website - www.megevechalet.co.uk) the pictures had a nice light shadow.  iweb still shows the light shadow, but on the website all the photos now have a thick black border.  Does anyone know why this might have changed and what i can do to resolve it?  I'm absolutely certain I've done nothing on iweb to change it and haven't actually been on iweb for about a month (until today when i checked to see that on iweb the shadow is still showing).
    Any help would be gratefully received!
    Thanks

    Are you using Firefox to view the site and see the black boxes?  That's a problem with FF and some other browsers on photos that have had frames, drop shadows, borders or reflections added to it. 
    There's an easy workaround that removes those black boxes, reduces the number of files needed to render the page and speeds up the loading of the page.  Follow the workaround described in this tutorial: #7 - Converting Photos w/Frames, Drop Shadows and/or Reflections into a Single Image File.
    It works very well.
    OT

  • Drop shadow problem with Illustrator CS5

    I've used drop shadow several times with no problems in both photoshop and Illustrator... currently I'm dropping a white shadow onto a black background and although the shadow drops correctly around the object I've noticed that there is some sort of extra white blur that is happening several inches away from my images reguardless of what shape they are. Let me know if a file would help and I can email an example of the problem. Thanks

    Wade, This does look like the exact problem I'm having. I do not want to make a clipping mask because I have around 20 pages with numerous images on each page of varying sizes... I tried- Effect/Document Raster Effect Settings, Under options I played with a couple different settings but none seem to have fixed the problem... There is a check box for;
    Anti-alias
    Create Clipping Mask
    -Add _____ in. Around Object
    Preserve spot colors
    I'm not familier with these settings and didn't know what you were recommending I change exactly?
    Thanks again for the help

  • AI to Fireworks drop shadow problem

    Hi,
    I'm importing .AI files into Fireworks in order to export them as .pngs because the raster quality is better than out of .ai,
    One of my files has a white box with a 100% black drop shadow on a grey background. In AI it looks fine, but when I open the file in Fireworks the shadow appears white, a bit like a glow.
    The shadow is set to 'Multiply' and has worked in other files.
    Any ideas why it's doing this? It's only on this file.
    See below:
    Thanks
    C

    This is a bit off-topic, but it relates to how Illustrator and Fireworks sometimes handle rasterization of vector objects differently, and I thought you might find it interesting. (This was done using Illustrator CS2 and FW8; I can't say whether CS5 behaves the same way or not.)
    The basic question is this: Where does a 1-pixel stroke belong on a vector object that's aligned to a bitmap grid?
    In Illustrator, with Snap to Pixel enabled (in Pixel Preview mode), the vector itself is aligned to the bitmap grid, and a 1-pixel stroke is balanced across both sides of the vector—appearing in effect as a lighter, 2-pixel, anti-aliased stroke. The result looks very imprecise. You can fix this by setting the Keyboard Increment (in Preferences) to 0.5 pixels, turning Snap to Pixel off, and nudging the object a half pixel in each direction using your keyboard arrow keys: Now the stroke, not the vector, is aligned to the bitmap grid.
    Theoretically, you should be able to adjust stroke position to handle this issue; however, I found that setting the Stroke to "Inside" produced an unexpected bit of anti-aliasing on one side of my rectangle. (This type of problem may have been fixed in a newer version of Illustrator.*)
    In Fireworks, vector objects tend to snap to the pixel grid automatically, as do strokes. But how can FW do this? After all, the default stroke position is center-aligned, just as it is in Illustrator. Well, it turns out that the application is willing to bend the rules a bit: A 25-pixel square with a 1-pixel stroke applied to it still only occupies 25 pixels on the grid, because Fireworks moves the stroke to the inside of the object. It cheats. Once you bump up the stroke weight to 2 pixels, the stroke alignment reverts to center. At 3 pixels, the stroke remains center-aligned but becomes anti-aliased, too.
    So anyway... I hadn't really sat down with Illustrator's Pixel Preview mode before. Despite the issues above, I think it's kind of neat in that it's like a window into the world of Fireworks and pixel grids. (In Fireworks, by contrast, you don't have the option of seeing vectors rendered smoothly at any zoom level, as in Illustrator's standard view mode.) I can't recall whether Preferences can be saved in a Workspace, but View settings can at least be saved as part of a template file, and you could probably set up a de facto workspace for working with pixels in Illustrator in a relatively short amount of time. This could help you avoid surprises when using "Save for Web" (as described in the article to which you linked).
    *Later, I was able to fix the "stroke inside" rendering problem in Illustrator by setting the stroke to .99px instead of 1px.

Maybe you are looking for