Mix 'n match units in CSS?
The 'em'
Is there any value to using relative units in your CSS? I used to think there was a ton of value, using ems for text, percentages for layout, and mixing and matching. However, I'm starting to lean away from relative units. Most of our projects lately have had fixed-width layouts, which makes it pretty convenient to stick with pixel units.
In the same breath, even though we were doing a lot of fixed-width stuff, I was gung-ho about using ems for certain text sizing, things like line-height, padding, etc. Setting a global line-height in ems seemed like a good idea, let it determine itself based on the size of the text, same goes for padding. Declare a global bottom padding on all headings and let it sort itself out. Still pretty useful, and I'm still big on using percentages for flexible columns and such, but the other day, I racked my brain on a Firefox v. Safari battle, the culprit -- line-height: 1.4em.
Let me show you. Take this HTML, a <p> followed by a <ul>.
<p class="tagline">This is a paragraph with a line-height set in ems.</p>
<ul id="primary-menu">
<li><a href="/">HOME</a></li>
<li><a href="/about">ABOUT</a></li>
<li><a href="/jobs">JOBS</a></li>
<li><a href="/contact">CONTACT</a></li>
</ul>
Now take this CSS on the <p>.
.tagline {
width: 445px;
margin: 0 0 15px;
float: right;
font: italic 14px/1.4em Georgia, Times, serif;
color: #ccc;
text-align: right;
}
Firefox on the left, and Safari on the right.
After banging my head for what seemed like way to long, and on two modern browsers nonetheless, changing the line-height from 1.4em to 20px solved the problem. All good in browser land.
So, my question is, in a world where things like browser zoom ultimately kill the need to scale text, how relevant are relative units like em?
