StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS buttons and crossbrowser issue
text
Body
copied!<p>I have a class 'button' that I want to use for button, input and a tags. The problem is that both button and input tags have a greater line height than the anchor tag does. I have attached an example here so you can play around with it in firebug or whatever.</p> <p><a href="http://28dev.com/stackoverflow/css-buttons.html" rel="nofollow noreferrer">http://28dev.com/stackoverflow/css-buttons.html</a></p> <p>But for those who just want to see the css/html, here it is:</p> <pre><code> .button { font-family : helvetica, arial, sans-serif; -moz-border-radius: 3px; -webkit-border-radius: 3px; background : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6; border-color : #636363 #888888 #888888 #636363; border-right : 1px solid #888888; border-style : solid; border-width : 1px; cursor : pointer; display : block; float : left; font-size : 12px; font-weight : normal; line-height : 100%; min-width : 100px; padding : 3px 12px; text-align : center; } .button, .button a { color : #282828; text-decoration : none; } .button:hover, .button:hover a { border-color : #343434; color : #080808; } .marginR { margin-right : 5px; } <button class='button marginR' type='submit'>button.button</button> <input type="submit" value="input.button" class="button marginR" /> <a class="button" href="">a.button</a> </code></pre> <p><strong>Updated CSS:</strong> This seems to fix most of the issues in FF, chrome, IE7 and safari:</p> <pre><code> .button { font-family : helvetica, arial, sans-serif; color : #282828; background : url(/images/layouts/silver/buttons.png) repeat-x scroll 50% 50% #E6E6E6; border-color : #636363 #888888 #888888 #636363; border-right : 1px solid #888888; border-style : solid; border-width : 1px; cursor : pointer; display : block; float : left; font-size : 12px; font-weight : normal; min-width : 150px; padding : 3px 0px; text-align : center; margin-top : 0px; line-height : 15px; text-decoration : none; border-radius : 3px; -webkit-border-radius: 3px; -moz-border-radius : 3px; } /* Invalid CSS God love IE's inability to fix their bugs properly leaving us workarounds to their inept development. See http://www.webdevout.net/css-hacks */ html* a.button { line-height : 18px; } .button:hover { background-image : url(/images/layouts/silver/button-hover.png); border-color : #343434; color : #080808; } .marginR { margin-right : 5px; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload