asp.net - ASP button looks different for different browsers -
i've put asp button near radfileupload control. i've tried many ways set proper looks example inline css, external css still not set. .aspx page code like
<tr> <td class="formlabel2"> <asp:label id="lbllname17" runat="server" text="photo:"></asp:label> </td> <td valign="top" style="padding: 0px !important"> <table width="275px" style="padding: 0px !important"> <tr style="padding: 0px !important"> <td width="200px" style="padding: 0px !important"> <telerik:radasyncupload id="radasyncupload1" runat="server" autoaddfileinputs="false" onclientfilesuploaded="hideremovebtn" visible="true" onclientfileuploadremoved="resizetextbox" maxfileinputscount="1" multiplefileselection="disabled" tabindex="17" onfileuploaded="radasyncupload1_fileuploaded" height="25px"> </telerik:radasyncupload> </td> <td width="65px" valign="top" style="padding: -4px !important; vertical-align:top;"> <asp:button width="65px" id="btnromovephoto" visible="true" text="remove" runat="server" style="margin-top:0px" onclick="btnromovephoto_click"></asp:button> </td> </tr> </table> </td> </tr> here i've tried set css class
.btnromovephoto { font-family: arial,helvetica,sans-serif; margin:0px !important; float:none !important; vertical-align:middle !important; padding: 0 !important; text-align: center !important; } using cssclass="btnromovephoto" in mozilla , ie9 button big , in chrome , safari smaller upload control height. if set height in mozila , ie text displays @ bottom if set text-align , vertical-align. i've tried input[type=button] set css , tried html button same issue occures.
any solutions?
use css3 box-sizing property include padding , border in total width. fixes firefox , ie padding issue
box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; update:
<%@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs" inherits="box_sizing._default" %> <!doctype html> <html> <head runat="server"> <title></title> <style type="text/css"> /*********** css reset start *************************/ /**** add beginning of css file *****/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } input[type="submit"] { margin: 0; padding: 0; border: 0; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; } /*********** css reset end ***************************/ /*****************************************************/ .btnremovephoto, #btnremovephoto { height:40px; margin:20px 0 0 20px; border:1px solid #ff7373; padding:0 20px; font-family: sans-serif; font-size: 12px; color:#ff7373; line-height: 1; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:button id="btnremovephoto" cssclass="btnremovephoto" runat="server" text="remove" clientidmode="static" /> </div> </form> </body> </html>
Comments
Post a Comment