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.