How to perfectly fit

[albertdt6]

Hi, I’m trying to fit a button with a textfield so I’ve been trying different dimensions (height’s button) until they conceded. The problem is: on Chrome looks great but in Firefox they don’t fit as I expected. How can I fix it?

Thank you for your help!

SCREENSHOTS: Chrome Firefox

CODE:

#textfield
    width: 120px;
    border: 1px solid #aaa;
    border-radius: 8px 0 0 8px;
    padding-top: 5px;
    font: 22px Arial, Helvetica; 
    padding-bottom: 5px;
    padding-left: 5px;
    box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
    outline: none;
}


#button {
    border-radius: 0 8px 8px 0;
    border: 1px solid #aaa;
    padding-top: 5px;
    margin-left: -5px;
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background-color:#77d42a;    
    display:inline-block;
    color:#306108;
    font-family:arial;
    font-size: 20px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    padding-top: 7px;
    text-shadow:0px 1px 0px #aade7c;
}

[Leonhard Ortner]

HI,

try

.class or #id {
box-sizing: border-box;
}

on css-trick.com u will find many videos where chris is using this technic…
Link: Box-Sizing

wbr leo

[Kitty Giraudel]

Hi. Would you mind making a CodePen we could fork and tweak?

[Author]

Posts