Home/ Questions/Q 6811787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:22:11+00:00

I have following css class For IE7 .shadow { margin-left: -5px; margin-top: -5px; zoom:

  • 0

I have following css class For IE7

    .shadow
            {

                margin-left: -5px;
                margin-top: -5px;
                zoom: 1;
           filter:progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
            }

This works greate and generates nice shadow in IE. but i want this effect on Mouse Hover event. so change following css class

.shadow
        {
            width:100%;
        }
        .shadow:hover
        {

            margin-left: -5px;
            margin-top: -5px;
            zoom: 1;
       filter:progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
        }

this doesn’t work. Why?? what is the problem in above CSS class?

My HTML:

<html>
<head>
    <style>
        .shadow
        {

            width:100%;
        }
        .shadow:hover
        {
            margin-left: -5px;
   margin-top: -5px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
        }
    </style>
</head>
<body>
    <div class="shadow" style="height:100px;width:100px">
        <h1>Swaminarayan</h1>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to specify a DOCTYPE to make it work in IE7 as it uses a different default DOCTYPE than other browsers. Read more about Quirksmode.

    Just adding the HTML5 DOCTYPE

    <!DOCTYPE html>

    to the very top of the document is enough and will trigger standards mode in every browser, including IE6.

    You can also use an older DOCTYPE like HTML4 Strict: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    I also had to allow some blocked content using the Internet Explorer Information bar before I could see the shadow effect.

    • 0