Question

I am trying to make a google search box and i have designed a code for that. But i have a problem caused the css run on firefox chrome and other browsers except IE … So what can i do ??

this is the code:

Abulkas Tablet

       #outerContainer{
         width: 350px;
         height: 60px;
         border-radius: 10px;
         box-shadow: 0 0 5px 1px #888;
         display: block;
       }
       .buttonwithimg
             {
             background: url(google-g-logo-2012.png) no-repeat;
             cursor:pointer;
                         border: none;
             }


       .googleButton{
         position: relative;
         left: 5px;

         width: 40px;
         height:50px;
       }

       #srchBox{
         border-radius: 3px;
         margin-left: 8px;
         height: 50px;
         width:200px;
         margin-top: 5px;
       }
       .otherButton{
         width:43px;
         height: 50px;
         .background { width:150px; height:150px; padding:3px; background-image:
 url(andro-view-tools/Transform-galaxy-s2-to-galaxy-s3.jpg); border:
 1px solid black; /* Safari and Chrome */
 -webkit-background-size: 190% 160%;

 /* Firefox */
 -moz-background-size: 190% 160%;

 /* Internet Explorer */
 -ms-background-size: 190% 160%;

 /* Opera */
 -o-background-size: 190% 160%;

 /* CSS3 */ background-size: 190% 160%; }
      }

     </style>
     <div class="background">
        &nbsp;<div id="outerContainer" style="width: 342px; height: 63px">
         &nbsp;&nbsp;<button class="buttonwithimg" style="width: 59px; height: 57px">;
 </button><input id="srchBox" type="search">    
 <button>class="otherButton" style="width: 59px; height: 52px">Search</button>
     </div>
        </div>   </body> </html>

Answer 1

box-shadow “hack” for IE can be found here