#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    How can I make css buttons same width in MSIE and Chrome?


    Hi

    I have a problem in making the latest versions of Internet Explorer (9) look the same as Google Chrome (26.0.1).

    SUMMARY
    I have two buttons one is using a class called: .linkBtn
    The other button is using a class called: .buynowBtn
    I have tried setting them to both be 85px wide by using "min-width:85px;"
    However in MSIE both buttons are 104 pixels wide... whereas in Google Chrome although the LinkBtn is 104px, the buynowBtn is 106px!

    Here are the relevant CSS lines of code:
    Code:
    .lot .lotDesc .linkBtn, .lot .lotDesc .linkBtnFinal{ /* (TJ-NEW) new style ".lot .lotDesc .linkBtnFinal" added for finalise button */
    position:absolute;
    left:8px;
    bottom:0;
    }
    .linkBtn,.linkBtnFinal{ /* (TJ-NEW) new style ".linkBtnFinal" added for finalise button */
    position:relative;
    display:inline-block; /* (TJ-NEW) required to standardise button widths */
    float:left;/* (TJ-NEW) required to standardise button widths */
    }
    .linkBtn a{
    min-width:85px;
    margin-bottom:3px;
    }
    .buynowBtn{
    position:relative;
    display:inline-block; /* (TJ-NEW) required to standardise button widths */
    float:left; /* (TJ-NEW-180313) */
    }
    .buynowBtn a{
    /* CSS3 Corner Radius */
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    /* (TJ-NEW) the following has been added to standardise button widths */
    min-width:85px;
    display:block;
    text-align:center;
    }
    .linkBtn a{
    color:#fff!important;
    font-size:12px!important;
    padding:0.1em 1em; /* (TJ-NEW) ? padding adjustment previously entered had been rolled back! */
    font-weight:normal;
    text-decoration:none!important;
    background:#BF2A48 ; /* Old browsers */
    /* CSS3 Gradient Background */
    background:-moz-linear-gradient(top, #BF2A48 0%, #BF2A48 49%, #9B0624 51%, #9B0624 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#BF2A48 ), color-stop(49%,#BF2A48 ), color-stop(51%,#9B0624), color-stop(100%,#9B0624)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* IE10+ */
    background:linear-gradient(to bottom, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* W3C */
    /*filterrogidXImageTransform.Microsoft.gradient( startColorstr='#BF2A48 ', endColorstr='#9B0624',GradientType=0 ); *//*IE6-8 */ /* (TJ-NEW) commented out IE style, as not working anyway and causes issue with fixed width */
    /* CSS3 Corner Radius */
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    /* (TJ-NEW) the following has been added to standardise button widths */
    display:block;
    text-align:center;
    }
    .linkBtn a:hover{
    color:#fff;
    text-decoration:none;
    background: #9B0624;
    }
    
    
    
    .buynowBtn a{
    color:#fff!important;
    font-size:12px!important;
    padding:0.1em 1em; /* ******* Updated to match place bid (TJ) ******* */
    font-weight:normal;
    text-decoration:none!important;
    background:#888; /* Old browsers */
    /* CSS3 Gradient Background */
    background:-moz-linear-gradient(top, #888 0%, #888 49%, #666 51%, #666 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(49%,#888), color-stop(51%,#666), color-stop(100%,#666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* IE10+ */
    background:linear-gradient(to bottom, #888 0%,#888 49%,#666 51%,#666 100%); /* W3C */
    /* filterrogidXImageTransform.Microsoft.gradient( startColorstr='#888', endColorstr='#666',GradientType=0 ); *//* IE6-8 */ /* (TJ-NEW) commented out IE style, as not working anyway and causes issue with fixed width */
    }
    .buynowBtn a:hover{
    color:#fff;
    text-decoration:none;
    background: #444;
    }
    .buynowBtn{
    position:relative;
    display:inline-block; /* (TJ-NEW) required to standardise button widths */
    float:left; /* (TJ-NEW-180313) */
    }
    .buynowBtn a{
    /* CSS3 Corner Radius */
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    /* (TJ-NEW) the following has been added to standardise button widths */
    min-width:85px;
    display:block;
    text-align:center;
    }
    Any thoughts?
    - I tried using "width:" rather than "min-width", but the text seems to wrap onto two lines which is a disaster.

    With thanks

    J
    Last edited by Kravvitz; April 3rd, 2013 at 09:55 AM. Reason: added [code] tags
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    change it to width and add
    Code:
    white-space: nowrap;
    overflow: hidden;

IMN logo majestic logo threadwatch logo seochat tools logo