I am trying to style three inline buttons. Two are inputs with a type of "submit" and one is a button with javascript attached two it.

I am trying to style all buttons to look the same. All are fine in FF but in IE the padding is all over the place. I have tried googling and trying different suggestions but noting is working.

Here is my css

.button {
cursor: pointer;
padding: 5px;
background-color: #88ab39;
color: #fff;
border: none;
font-size: 18px;
-moz-border-radius: 3px;
-webkit-border-radius:3px;
    display: inline;

}

And example in FF

alt text

And IE

alt text

5 answers

1
point

You should try using display:inline-block which will then let IE use vertical padding. IE ignores vertical padding on elements with display:inline. The rounded corner CSS you have used will not work on Opera and IEs.

Answered about 7 years ago by Divya Manian
0
points

using ONLY the information youprovided, all three buttons look the same in FF, IE6 and IE8. there must be something else, which you might think is unrelated, that is causing this. can you post the full HTML and CSS?

Answered about 7 years ago by jenny ham
0
points

Your code works as intended for me in FF, Safari, and IE 7, and I can't seem to duplicate the problem. However, I don't believe that 'display: inline' is necessary to achieve your desired results. It would be good to see the rest of your HTML and CSS to give a little more context.

Answered about 7 years ago by Dwayne Anderson
0
points

Sorry most important piece of information I forgot to add is that I am using the Blueprint CSS framework.

Sorry my bad.

Answered about 7 years ago by Andrew Cetnarskyj
0
points
-moz-border-radius: 3px;
-webkit-border-radius:3px;

Those are browser-specific CSS markups that are only responded to by Gecko- and Webkit-powered web browsers.

If I were in your place, I would render the green rounded edges in Photoshop, export as an image, and change your CSS to reflect the following:

input.submit {
               height:20px; /* actual height in pixels of the specific button */
               width:100px; /* actual width in pixels of the specific button */
               background:url(/path/to/greenbg.jpg) top left no-repeat;
              }

Create more classes as you see fit to accommodate different dimensions. This is a quick and dirty fix. Good luck.

Answered about 7 years ago by elitesouth