I am working with C# markup and have the following code snippet:
<asp:ImageButton ID="imgBtn" runat="server" CssClass="accordion-icon-close" value=""
CommandName="Edit" />
Here is the CSS class associated with it:
.accordion-icon-close
{
background-image: url("../Images/ui-icons_888888_256x240.png");
background-repeat: no-repeat;
background-position: -32px -16px;
display: block;
height: 16px;
width: 16px;
}
However, Internet Explorer seems to be adding borders around the image element which leads to visibility issues. The corresponding HTML markup looks like this:
<input type="image" name="ctl00$MainContent$gvByPriorityCount$ctl02$imgBtn" id="MainContent_gvByPriorityCount_imgBtn_0" class="accordion-icon-close" value="" src="" />
Inquiry: Is there a way to remove these unwanted borders in Internet Explorer? Interestingly, Firefox does not exhibit this behavior.
I attempted to use jQuery to override the CSS styling but did not achieve the desired result:
$("input[type='image']").css('border-style', 'none !important;');
For testing purposes, I am using IE 8.
Thank you for any assistance provided!
HTML Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link href="Styles/Test.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
if ($) {
$(document).ready(function () {
$("input[type='image']").css('outline', 'none !important;');
});
}
</script>
</head>
<body>
<form method="post" action="Test.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKdjqv1AgKv/aZYAq/9uh0Cr/3+9QEioIHaMuCcNMLO+7F1bdAtcLLool6O9sR4U9mtwrnrYQ==" />
</div>
<div>
<div>
<table cellspacing="0" rules="all" border="1" id="gvTest" style="width:100%;border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col">ID</th>
</tr><tr>
<td valign="top">
<input type="image" name="gvTest$ctl02$imgBtn" id="gvTest_imgBtn_0" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" />
</td><td>1</td>
</tr><tr>
<td valign="top">
<input type="image" name="gvTest$ctl03$imgBtn" id="gvTest_imgBtn_1" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" />
</td><td>2</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>