CODEWITHSUNDEEP
htmlcssinternet-explorer
Keef Baker
Keef Baker

Reputation: 641

Button size wrong in IE

I'm starting my journey in cross-browser compatibility (hooray)

I have a number of buttons that work fine in firefox and chrome but they appear to have much more vertical padding on them in IE. They appear to be only the < button > buttons, not the ones that are < input > with a class of button. For example:

<input type="submit" class="button" name="check" value="Send">

Works fine, but:

<button id="Del" class="button">Delete</button>

Has a load of extra padding on it

I wish I could upload a picture but all image sites are blocked from here, but basically the top and bottom padding on the buttons look like about 7px rather than the 2px I defined in the CSS. There is only CSS for specific input types so i'm not sure what's happening.

CSS for the button Class:

.button {
-webkit-transition-duration: 0.4s; 
transition-duration: 0.4s;
background-color: #006099; /
width: 500px;
border: none;
color: white;
padding: 2px 2px 2px;
border-radius: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
right: 7px;
font-size: 16px;
}

CSS for any input types:

input[type=text] {
border: 2px solid #006099;
border-radius: 4px;
position: absolute;
right: 7px;
}
input[type=password] {
border: 2px solid #006099;
border-radius: 4px;
position: absolute;
right: 7px;
}

As I've said these buttons display fine in Chrome and Firefox but on IE the vertical padding is incorrect. The other elements of the button class carry through such as colour and transition

Any ideas?

Upvotes: 1

Views: 1537

Answers (1)

Gianluca Mancini
Gianluca Mancini

Reputation: 1312

If you want to be sure that your buttons will have the same height across all browsers, you have to set for example height: 2.5em. I used ems because you can easly scale up or down the buttons by changing the size of the font, like font-size: 1.25em.

Here is a full example.

Upvotes: 1

Related Questions