SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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 :

    HTML Code:
    <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 :
    Chromebuttons.PNG

    Internet explorer :
    IEbuttons.PNG

    Mozilla Firefox :
    Mozillabuttons.PNG

    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) :

    HTML Code:
    
    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.

  2. #2
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •