Weblog Redesign

by lovromar

HTML

<div id="container">
    
    <header>
        <h3>Joshua Hibbert</h3>
    </header>

    <div id="content" class="clearfix">
        <article id="post-1297" class="post-1297 post type-post status-publish format-standard hentry category-css clearfix red first" role="article" itemscope itemtype="http://schema.org/BlogPosting">
            <header>
                <h1 class="single-title" itemprop="headline">Line-Height Doesn’t Work As Expected On Inputs</h1>
            </header>
            
            <section class="post_content clearfix" itemprop="articleBody">
<p>While Chrome and Safari respect line-height val­ues on inputs, Firefox, Internet Explorer, and Opera do not. I found out about this when exper­i­ment­ing with <a href="http://joshnh.com/2012/12/03/heres-a-neat-trick-using-the-focus-pseudo-class/">this</a> little :focus trick I recently discovered.</p>
<p>So why don’t all browsers behave the same way? Inconsistent beha­vior like this is very frus­trat­ing for a web designer. Ideally, I’d like all browsers to behave as Chrome and Safari do in this case and respect line-height val­ues on inputs. Unfortunately, this is not the case, although at least Firefox expli­citly state what they will be doing in their user agent style sheet:</p>
<pre>input {
    line-height: normal !important;
}</pre>
<p>Who has the time to look through each browser’s user agent style sheet though? Also, using the value ‘nor­mal’ is unre­li­able as that depends on the typeface and can roughly range from 1 to 1.2. Each browser also renders ‘nor­mal’ slightly dif­fer­ently. See <a href="http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/">this art­icle</a> by Eric Meyer for more information.</p>
<p>Now I assume that Firefox, Internet Explorer, and Opera don’t feel that it’s neces­sary to respect line-height on inputs because they only con­tain one line of text, and most of the time this is fine, but if you are work­ing with a strict baseline, or doing some­thing...

CSS

</style>
    <script type="text/javascript" src="//use.typekit.net/iah7hac.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>

html {
    overflow-x: hidden;
}
body {
    background-color: #fff9f4;
    font: 150%/1.5 "ff-meta-serif-web-pro", serif;
    overflow-x: hidden;
    padding: 0 1.5em;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.025em;
}
#container {
    margin: 0 auto;
    max-width: 35em;
    padding-bottom: 5.5em;
}

/* Default Typography */

html {
    color: #413f3f;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 100;
    margin: 0;
}
h1 {
    font-family: "jaf-bernino-sans-condensed", sans-serif;
    font-size: 2.75em;
    line-height: 1.1;
    margin-bottom: 1.75em;
    margin-top: 1.825em;
}
h2 {
    font-size: 1.75em;
    font-weight: bold;
    line-height: 1.35;
    margin-bottom: 0.475em;
    margin-top: 1.5em;
}
h3 {
    color: #fff9f4;
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
}
h4 {
    font-size: 1.3125em;
    line-height: 1.142857142;
    margin-bottom: 1.142857142em;
}
h5 {
    font-size: 1.125em;
    line-height: 1.333333333;
    margin-bottom: 1.333333333em;
}
h6 {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1.5em;
}
p,
blockquote {
    font-size: 1em;
    margin: 0 0 1.5em;
    line-height: 1.5;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
p {
    margin: 0;
}
P + p {
    text-indent: 1.5em;
}
p a:link,
p a:visited {
    color: #f50;
    text-decoration: none;
    -webkit-transition: .1s;
       -moz-transition: .1s;
        -ms-transition: .1s;
         -o-transition: .1s;
            transition: .1s;
}
p a:hover,
p a:focus {
    color: #c20;
}
p a:active {
    position: relative;
    top: 1px;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}
dl,
ol,
ul {
    font-size: 1em;
   ...