The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file:
<head><style>...</style><head>
or in the style attribute of the link:
<a style="..."> ... </a>
I've ensured there are no elements affected by the appearance attribute, experimented with adding the background-attachment: fixed; style, and even attempted to adjust the position coordinates:
background-position-y: 465px;
background-position-x: 5px;
to:
background-position: left center;
All these variations work flawlessly in Firefox with the following CSS:
.search-btn {
padding-left: 32px;
padding-right: 10px;
background-image: url(../Images/search.png);
background-position-y: 465px;
background-position-x: 5px;
background-repeat: no-repeat;
}
But they fail to render properly in Chrome or Internet Explorer.
<asp:LinkButton ID="btnSearch" runat="server" CssClass="btn blue-btn mar-bot search-btn" OnClick="btnSearch_Click">Search</asp:LinkButton>
The other classes listed in the CssClass attribute follow the order in which they appear in my CSS stylesheet:
.mar-bot {
margin-bottom: 6px;
}
.blue-btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue-btn:hover {
background-color: #6FC6FF;
}
.btn {
border-radius: 5px;
padding: 4px 8px;
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.search-btn {
...
}