I have a simple imagebutton in Visual Studio 2010 / c# / .NET framework 4.0:

asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/mypic.jpg" Width="400px"

IE10 / Windows 8 shows the picture in the original size (width 200 px) and ignores the specified width (400 px).

All other browsers behave as expected, but IE 10 doesn't.

I tried resizing an simple image (not being a button) asp:Image; that works fine in IE 10.

Can anybody help me to solve this problem?

Thanks in advance!

Sushmaja Arumalla

ASP.NET is going to take your asp.net code and generate the appropriate HTML code and sent back to the browser.

When you open the page within the browser, right click on the page and select view source. Cut an paste the HTML code that was generated so we can see what the result was.

Actual Code is

<body>
    <form id="form1" runat="server">
    <div>
    <asp:ImageButton ID="Imagebutton1" runat="server" Width="20px" Height="20px" AlternateText="Close" ImageUrl="~/images/btn_Close1.jpg" ></asp:ImageButton>
    </div>
    </form>
</body>

** Page source in Firefox **

<body>
    <form method="post" action="WebForm17.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwNjg4NTM5OGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWdlYnV0dG9uMdItGcBPAzibamLwrxZSir5wUuFb+Cbf9bnMtebHh0ym" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLLkqXQBgLSwpm0CB1Kde5t7+k0sy/ePyXqstAVTSA4sFp6uBkz24ergOOf" />
</div>
    <div>
    <input type="image" name="Imagebutton1" id="Imagebutton1" src="images/btn_Close1.jpg" alt="Close" style="height:20px;width:20px;" />
    </div>
    </form>
</body>

Page source in Chrome

<body>
    <form method="post" action="WebForm17.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwNjg4NTM5OGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWdlYnV0dG9uMdItGcBPAzibamLwrxZSir5wUuFb+Cbf9bnMtebHh0ym" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLLkqXQBgLSwpm0CB1Kde5t7+k0sy/ePyXqstAVTSA4sFp6uBkz24ergOOf" />
</div>
    <div>
    <input type="image" name="Imagebutton1" id="Imagebutton1" src="images/btn_Close1.jpg" alt="Close" style="height:20px;width:20px;" />
    </div>
    </form>
</body>

Page source in IE9 and IE10 Compact View

<body>
    <form method="post" action="WebForm17.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwNjg4NTM5OGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWdlYnV0dG9uMdItGcBPAzibamLwrxZSir5wUuFb+Cbf9bnMtebHh0ym" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLLkqXQBgLSwpm0CB1Kde5t7+k0sy/ePyXqstAVTSA4sFp6uBkz24ergOOf" />
</div>
    <div>
    <input type="image" name="Imagebutton1" id="Imagebutton1" src="images/btn_Close1.jpg" alt="Close" style="height:20px;width:20px;" />
    </div>
    </form>
</body>

Source in IE10

<body>
    <form method="post" action="/WebForm17.aspx" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwNjg4NTM5OGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWdlYnV0dG9uMdItGcBPAzibamLwrxZSir5wUuFb+Cbf9bnMtebHh0ym" />

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLLkqXQBgLSwpm0CB1Kde5t7+k0sy/ePyXqstAVTSA4sFp6uBkz24ergOOf" />
    <div>
    <input type="image" name="Imagebutton1" id="Imagebutton1" src="images/btn_Close1.jpg" alt="Close" />
    </div>
    </form>
</body>

Here Style attribute is not rendered

i got it now after struggling for these many days
But i think it is partial solution
Every style we write for asp.net server controls should not use server attributes.the style are written in style attribute and seems everything is working fine in any type of browser

hi, you can try this hack hope this will help you

<img src="your link" style="width:400px;height:400px;width:400px\9\0;height:400px\9\0;">

hope this will solve your prob . here are some other hacks

color:red; /* All browsers */

color:red !important;/* All browsers but IE6 */

_color:red; /* Only works in IE6 */

color:red; / IE6, IE7 */

+color:red;/* Only works in IE7*/

+color:red; / Only works in IE7 */

color:red\9; /* IE6, IE7, IE8, IE9 */

color:red\0; /* IE8, IE9 */

color:red\9\0;/Only works in IE9/

what are the styles for IE 10

sorry I cant understand your point. just add \9\0 at the end of your css property. like I use them in above example.

Please share the solution, for other's help .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.