Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Help with CSS Buttons please?

Hello

I am trying to make some buttons using CSS but am having a bit of trouble. The buttons come out alright except for the width. I am trying to make them all the same width so they don't look messy but I can't get it right. I have tried using the "width" attribute but it hasn't worked. Can anyone see where I have gone wrong?

.button { border: 2px solid #006699;

width: 150px;

padding: 3px 3px 3px 3px;

background-color: #ffffcc;

color: #000000;

font-family: Verdana, sans-serif;

font-size: 1em;

text-align: center;

}

Many thanks for your help!

3 Answers

Relevance
  • Anonymous
    10 years ago
    Favorite Answer

    Width is supported in all browsers. Your problem may stem from the fact that the text may not have the same width/height because of the differences in the font size, number of characters in description versus the padding being used. If you set a width/height for the button that will fit the largest amount of text being used, then you should have any problems except with IE. IE does not do dimensions or font sizes like other browsers. Make a separate CSS for IE only and use its Conditional Comments [ http://msdn.microsoft.com/en-us/library/ms537512.a... ].

    .button { border: 2px solid #006699;

    width: 150px;

    height: 30px;

    padding: 3px;

    background-color: #ffc;

    color: #000;

    font-family: verdana, sans-serif;

    font-size: 1em;

    text-align: center;

    line-height: 18px; /* try. remove if doesn't work */

    }

    Ron

  • 10 years ago

    i tested your code and everything should work great, i didn't get any width problems..

    but your can try this code

    .button { border: 2px solid #006699;

    min-width: 150px;

    max-width: 150px;

    padding: 3px 3px 3px 3px;

    background-color: #ffffcc;

    color: #000000;

    font-family: Verdana, sans-serif;

    font-size: 1em;

    text-align: center;

    }

    Edit:

    i checked and Internet explorer doesn't support width in css :( but all the other browsers should work good...

  • 10 years ago

    Try using display: block?

Still have questions? Get your answers by asking now.