Category: HTML

Fix the 1px height difference between input elements

<span><input type="text" /><input type="submit" /></span>

span, input {
    margin: 0;
    padding: 0;
}
span {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    overflow: hidden;
}
input {
    border: none;
    height: 100%;
}
input[type="submit"] {
    border-left: 1px solid black;
}

References:
http://stackoverflow.com/questions/6557784/persistent-margin-and-1px-height-difference-around-input-elements
http://jsfiddle.net/NGLN/n98SP/1/

Make Text Vertical Align to Middle Using jQuery

<a><span>Short</span></a>

<a><span>Long Button</span></a>

<a><span>Long Long Button</span></a>

<style type=”text/css”>

a {display:block; width:100px; height:100px}

span {display:block}

</style>

<script type=”text/javascript”>

$(function() {

$(‘a’).each(function() {

var $text = $(this).find(‘span’);

var wrapper_height = $(this).height();

var text_height = $text.height();

var padding = 0;

if (text_height < wrapper_height) {

padding = (wrapper_height – text_height) / 2;

}

$text.css(‘padding-top’, padding);

});

});

</script>

Web Font

Most safe to use:
Times New Roman
Times
Arial
Helvetica
Courier New
Courier

Usually work cross-platform:
Palatino
Garamond
Bookman
Avant Garde

Work on Windows and MacOS but not Unix:
Verdana
Georgia
Comic Sans MS
Trebuchet MS
Arial Black
Impact