Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to remove border of ASP.NET ImageButton
    primarykey
    data
    text
    <p>I have the following C# markup:</p> <pre><code>&lt;asp:ImageButton ID="imgBtn" runat="server" CssClass="accordion-icon-close" value="" CommandName="Edit" /&gt; </code></pre> <p>The css class is defined as follows:</p> <pre><code>.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; } </code></pre> <p>It's a no-brainer really, but somehow IE manages to meddle with the borders surrounding the image (because it's really an input tag in HTML) so that they're always visible. The HTML markup is:</p> <pre><code>&lt;input type="image" name="ctl00$MainContent$gvByPriorityCount$ctl02$imgBtn" id="MainContent_gvByPriorityCount_imgBtn_0" class="accordion-icon-close" value="" src="" /&gt; </code></pre> <p><strong>My Question:</strong> How do I remove the borders that IE is placing around the input tag? Firefox shows no borders, so I'm certain this is just some crappy IE behavior. </p> <p>I tried using jQuery to override the CSS somehow, but to no avail.</p> <pre><code>$("input[type='image']").css('border-style', 'none !important;'); </code></pre> <p>Also, I'm using IE 8 for this test.</p> <p>Thanks for the help!</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;&lt;title&gt; &lt;/title&gt;&lt;link href="Styles/Test.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript"&gt; if ($) { $(document).ready(function () { $("input[type='image']").css('outline', 'none !important;'); }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="post" action="Test.aspx" id="form1"&gt; &lt;div class="aspNetHidden"&gt; &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKdjqv1AgKv/aZYAq/9uh0Cr/3+9QEioIHaMuCcNMLO+7F1bdAtcLLool6O9sR4U9mtwrnrYQ==" /&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt; &lt;table cellspacing="0" rules="all" border="1" id="gvTest" style="width:100%;border-collapse:collapse;"&gt; &lt;tr&gt; &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;&lt;th scope="col"&gt;ID&lt;/th&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td valign="top"&gt; &lt;input type="image" name="gvTest$ctl02$imgBtn" id="gvTest_imgBtn_0" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" /&gt; &lt;/td&gt;&lt;td&gt;1&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td valign="top"&gt; &lt;input type="image" name="gvTest$ctl03$imgBtn" id="gvTest_imgBtn_1" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" /&gt; &lt;/td&gt;&lt;td&gt;2&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td valign="top"&gt; &lt;input type="image" name="gvTest$ctl04$imgBtn" id="gvTest_imgBtn_2" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" /&gt; &lt;/td&gt;&lt;td&gt;3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload