wrong button height when repeating

[auipga]

If you are repeating the buttons very often by the line some of the heigt of some middle buttons are too little. I adjusted the line-heigt of a.button, button from 1.11 to 1.26. The overall heigt of the buttons is now 25 instead of 24 px. I found no value between 1.11 and 1.26 witch would match the 24px exact.

[erikbrannstrom]

This solved a problem I had where a button next to a a.btn would differ in size by 2 pixels in Firefox 5. The weird part is that it looked perfect in Mozilla Aurora, Chrome, Opera and Safari! In regard to that, I suggest merging this commit :)

[Imran-imtiaz48]

Changes Observed

1. Line Height Change:

   • Old: line-height: 1.11;
   • New: line-height: 1.26;

   The line-height has been increased from 1.11 to 1.26, which can improve readability by providing more vertical space within the button element.

Suggestions for Improvement

1. Commenting Changes:

   • It's a good practice to leave comments indicating why the line-height was adjusted. This will help future developers understand the context of the change.

     line-height: 1.26; /* Increased line-height for better readability */

2. Use of Variables:

   • Consider using CSS variables for repeated values such as colors and font sizes. This makes future changes easier and the code cleaner.

     :root {
         --main-font-size: 12px;
         --main-color: #3C3C3D;
         --shadow-color: #FFFFFF;
         --border-color: #CACACA;
     }
     
     a.button, button {
         display: inline-block;
         padding: 5px;
         font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
         font-size: var(--main-font-size);
         color: var(--main-color);
         text-shadow: 1px 1px 0 var(--shadow-color);
         background: #ECECEC url(../images/css3buttons_backgrounds.png) 0 0 no-repeat;
         white-space: nowrap;
         overflow: visible;
         cursor: pointer;
         text-decoration: none;
         border: 1px solid var(--border-color);
         -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
         border-radius: 2px;
         outline: none;
         position: relative;
         zoom: 1;
         line-height: 1.26;
         *display: inline;
         *vertical-align: middle;
     }

3. Consistent Units:

   • Ensure consistency in units (e.g., px, em, rem). If px is used predominantly, continue with that unless there is a specific reason to mix units.

4. Browser Prefixes:

   • Consider using a tool like Autoprefixer to handle browser prefixes. This ensures that you have the latest support for various browsers and reduces the manual effort.

     /* Sample CSS for autoprefixing */
     .example {
         display: flex;
     }

Implementing these suggestions will make your CSS code more maintainable, readable, and scalable.