Today, in development, I noticed that a drop down menu I was building had inconsistent line-heights between Firefox 2 and the new Firefox 3. Using Verdana, font-size:10px, Firefox 3 rendered the height of the line as 14px tall, whereas Firefox 2 was only 12px. Because of the inconsistent height, I couldn’t line my drop-down menu up correctly in both browsers.

An excellent way to see this inconsistency in action is through Eric Meyer’s Javascript line-height test. Just open up this link in different browsers and the rendered line-height will be displayed for you.

Although we are used to making special considerations for Internet Explorer and Safari, problems between releases of similar browsers are much harder to solve for. It took me awhile to figure out what the problem actually was.

The solution, luckily, is quite simple. Set

body {line-height:1.5}

(or some other unitless value)

You will want to put this at the top of your reset.css stylesheet which you should be using for the greatest browser consistency possible. Here at AWP we like to use Blueprint CSS Framework which uses reset methods developed by Eric Meyer’s.

Now my drop-down menus line up correctly! Yes!