Question

Kind of come up a against a weird problem…

Here is my css for a button:

a.cta-btn-green { 
    color:#fff !important; 
    font-size:14px !important; 
    font-weight:bold; 
    text-shadow: #060 1px 1px 1px; 
    background-color:#329122; 
    padding:5px 10px;
    -moz-border-radius:14px; 
    -webkit-border-radius:14px; 
    text-decoration:none;
    float:right;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    cursor:pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
}


input.cta-btn-green { 
    color:#fff !important; 
    font-size:14px !important; 
    font-weight:bold; 
    text-shadow: #060 1px 1px 1px; 
    background-color:#329122; 
    padding:5px 10px;
    -moz-border-radius:14px; 
    -webkit-border-radius:14px; 
    text-decoration:none;
    float:right;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    cursor:pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
} 

Both CSS classes are the same, but one is applied to <a> and the other is applied to <input type="submit" /> …The effect is that Firefox is giving the input.cta-btn-green greater height than a.cta-btn-green ?

Can anyone tell me where I’m going wrong?

Thanks

Answer 1

if you tell your a and input to display:block then you will be able to set specific heights and thus make them the same.

so add the following lines to both rules:

display:block;
height:20px; /*adjust this as needed*/