How to make these two buttons the same height size?

Hi,
I have a jsp page that has two buttons, but they look different height size and different shape from different browsers :


<input title="Save" type="submit" name="submit" class="submitbutton" value='Save'/> <html:link href='<%=mDataBackLink%>' styleClass="linkButton" style="margin:15px"><bean:message key="label.backTolistMetadata" /></html:link>

Chrome :

Internet explorer :

Mozilla Firefox :

This is a part of my css file (sorry I don’t know how to format it here in this forum, I just put it between HTML tags) :




input[type="button"], input[type="submit"], input[type="image"], input[type="reset"], input[type="radio"], input[type="checkbox"], select, button { cursor: pointer; }legend { cursor: help; }textarea { overflow: auto; }button, input, select, textarea { margin: 0; }
body { font:13px/1.615 sans-serif; }select, input, textarea, button { font:99% sans-serif; }
body, select, input, textarea { font-family: "Lucida Sans Unicode", LucidaSansUnicode, "Lucida Sans", LucidaSans, "Lucida Grande", LucidaGrande, Helvetica, Arial, sans-serif; }
small { font-size: 85%; }em, i { font-style: italic; }strong, th, b { font-weight: bold; }td { vertical-align: top; }div { position: relative; }     .right { float: right; }   
/* Anchor tag definition */a, img { display: inline-block; } a, a:active, a:visited { text-decoration: underline; }a:hover { text-decoration: none; }a:hover, a:active { outline: none; }a img, a:hover img { border: none; vertical-align: text-bottom; }
/* Header tag definition */h1, h2, h3, #header h5, caption, #main-menu a { font-family: "Trebuchet MS", Trebuchet,Arial, Helvetica, sans-serif; }h1, h2, h3, h4, h5, caption { letter-spacing: .0625em; }h1 { font-size: 167%; padding-bottom: 10px; }    h1 + p { padding-top: .5em; }        h1.center { text-align: center; }h2, caption { font-size: 138.5%; font-weight: bold; }    h2 + p { padding-top: .5em; }h3 { font-size: 123.1%; font-weight: bold; }h4 { font-size: 118%; }h5 { font: normal 108% Georgia, serif; }    h5 + p { padding-top: .5em; }
p, ul, ol, dl, blockquote, address, form { padding-bottom: 2px; }ol.justify { text-align: justify; }p.center {text-align: center;}
/* Form tag definition */form {  }fieldset { padding: 10px; margin-bottom: 10px; border: 1px solid #6897a3; margin-top: 15px; }legend { font-weight: bold; font-size: 115%; }label { font-weight: bold; font-size: 100%; text-transform: uppercase; letter-spacing: .125em; }    .formLabel { display: block; line-height: 1.8; vertical-align: top; font-weight: bold; padding-top: 10px; color: #245393; }input[type="text"], input[type="password"], input[type="file"], textarea { color: #999; border: 1px solid #7b8; margin-right: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;  }input[type="file"] { color: #999; border: 1px solid #999; padding: 3px; }input[type="text"]:focus, input[type="password"]:focus, textarea:focus { color: #444; background-color: #eee; border: 1px solid #333; }input[type="submit"], input[type="reset"], button { font-weight: bold; font-size: 108%; cursor: pointer; -moz-border-radius:5px; -webkit-border-radius:5px; }input[type="submit"], input[type="reset"] { padding: .2em .4em .17em; }input.submitbutton { padding-top: 5px; margin: 1.5em 0; }button { padding: .32em .4em .1em; }
body { margin: 20px 0; background-color: #e2e0d3; }    .container { width: 1375px; margin: 0 auto; }    p {  padding: 5px; }        p.error { font-weight: bold; margin: 10px;}        p.important { font-weight: bold; color: red; }        
/* Header section */#header { background: top left no-repeat url('../images/ic_grouping_header.png')  transparent; height: 100px; margin: 0 0 10px; padding: 0 10px 0 0; border-top-width: 10px; -moz-border-radius:5px; -webkit-border-radius:5px; }    #header a.button {  float: right; margin: 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; }        /*Sai Menu Section*/    #saiMenu{padding:0; color: #7ab;}   #saiMenu ul{margin:0;padding:0;list-style:none; text-align: left;}   #saiMenu ul li{display:block;position:relative;float:left;}   #saiMenu li ul{display:none;}   #saiMenu ul li a{display:block;}   #saiMenu li a:hover, #saiMenu li.over a {color:#222;}   #saiMenu li:hover ul{display:block; position:absolute;}   #saiMenu li:hover li{float:none;}   #saiMenu li:hover a{background:#CFD2B6;}   #saiMenu li:hover li a:hover{background:#548492;color:#fff;}      /*Agency Menu Section*/   #agencyMenu{padding:0; color: #7ab;}   #agencyMenu ul{margin:0;padding:0;list-style:none; text-align: left;}   #agencyMenu ul li{display:block;position:relative;float:left;}   #agencyMenu li ul{display:none;}   #agencyMenu ul li a{display:block;}   #agencyMenu li a:hover, #saiMenu li.over a {color:#222;}   #agencyMenu li:hover ul{display:block; position:absolute;}   #agencyMenu li:hover li{float:none;}   #agencyMenu li:hover a{background:#CFD2B6;}   #agencyMenu li:hover li a:hover{background:#548492;color:#fff;}   /* Main menu section */#main-menu { padding: 0; color: #7ab; }    #main-menu ul { border-bottom: 2px solid #DDEEED; padding-bottom: 0; text-align: left; }    #main-menu li { list-style-type: none; float: left; position: relative; z-index: 1000; }        #main-menu li:hover a, #main-menu li.over a { color: #222; }        li.selected { font-weight: bold; color: #333; }        #main-menu a:active { color: red; }    #main-menu a { font-size: 116%; letter-spacing: .125em; padding: .25em .5em .22em; color: #666; border-right: 1px solid #DDEEED; text-decoration: none; white-space: nowrap; }        #main-menu a:hover, #main-menu a:focus { color: #136; background-color: #CFD2B6; }    /* Main wrapper */#main-wrapper { background-color: #fff; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }   /* Main content section */#main-content{ padding: 0 50px 50px; min-height: 532px; float: inherit; width: 1275px; border: 1px #7ab }    div.column { float: left; margin-top: 5px; }    div.firsthalf { width: 375px; margin-right: 25px; }    div.secondhalf { width: 375px; margin-left: 25px; }
#center-body { padding: 50px; min-height: 555px; float: inherit; }    div.error { font-weight: bold; color: red;  }        div.error h3 { color: red; }    div.message { font-weight: bold; color: #30C; margin-top: 5px; margin-left: 40px; }    div.formMessage { font-weight: bold; color: #333; }        /* Footer section */#footer { float: left; position: relative; padding: 5px 0 0 5px; height: 20px; }    #footer p { text-align: left; }
/* Colors */body { background: #e2e0d3; }h1, h1 a { color: #548492; }    h1 a, h2 a, h3 a { text-decoration: none; }    h1 a:hover, h2 a:hover, h3 a:hover { color: #666; text-decoration: underline; }h2, h2 a, .tableCaption { color: #053E58; } /* dark blue */h3, h3 a { color: #999; } /* light blue */h4 { color: #666; }h5 { font-family: "Lucida Sans Unicode",LucidaSansUnicode,"Lucida Sans",LucidaSans,"Lucida Grande",LucidaGrande,Helvetica,Arial,sans-serif;     line-height: 15px;     padding: 5px;     text-align: center;     color: #000;}label { color: #000; }label.error { color: #F30}.plainLabel { display: list-item; line-height: 1.8; vertical-align: baseline; font-weight: bold; padding-top: 10px; color: #245393; }input[type="submit"], input[type="reset"], button { color: #333; background-color: #CFD2B6; border: 1px solid #666; }input[type="submit"]:hover, input[type="reset"]:hover, button:hover, input[type="submit"]:focus, input[type="reset"]:focus, button:focus { color: #eee; background-color: #548492; }a, a:active, a:visited { color: #00F; text-decoration: underline; -moz-border-radius:5px 5px -1px; -webkit-border-radius:5px 5px -1px 5px; }a:hover { color: #985; text-decoration: none; }

Thanks, your help is appreciated.

Its simple, in the coding line of button you can use height and width (in pixels) and keep it same for both the buttons.

Another method is to open the file into any webpage editor and go to its design view and then select the button and re-size it.