I am facing an issue with my Google search box code. It works perfectly on Firefox, Chrome, and other browsers except for Internet Explorer. Can anyone help me troubleshoot this?
Below is the code snippet:
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">
<div id="outerContainer" style="width: 342px; height: 63px">
<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>