Member Avatar for sushmaja.arumalla.9

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

Edited by pritaeas because: Moved to ASP.NET
  • 4 Contributors
  • 9 Replies
  • 987 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by M.Waqas Aslam
Member Avatar for JorgeM

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.

Member Avatar for sushmaja.arumalla.9

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

Member Avatar for sushmaja.arumalla.9

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

Member Avatar for M.Waqas Aslam

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/

Member Avatar for sushmaja.arumalla.9

what are the styles for IE 10

Edited by sushmaja.arumalla.9
Member Avatar for M.Waqas Aslam

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

Member Avatar for M.Waqas Aslam

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.