Bigger height in Firefox than in Chrome

css, firefox, google-chrome, height

Solution

I think this is because different browsers have different default line-heights, so if you set your `nav li a` to a specific line-height, it will look the same on all browsers.

http://jsfiddle.net/5ZEqL/4/

Problem

I have difference between Chrome and Firefox in the height of whole left column beginning on the navigation. Here is comparative picture of the column in ff and chrome: http://tinypic.com/r/jhbynb/8 [Here][1] is the code: ``` <html> <nav> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> </nav> <div class="space"></div> <div class="block"> <h2>Some text</h2> <p>Number of visitors: 28</p> </div> </html> ``` CSS ``` nav { width: 230px; clear: both; padding-top: 8px } ul { list-style-type:none; margin:0; padding:0; } nav li a { display: block; } nav a:link { color: #718785; display: block; border-bottom: 1px solid #d4d4d4; padding: 7px; text-decoration: none; font-size: 20px; } nav a:hover { font-weight: bolder; } nav a:visited { color: #718785; border-bottom: 1px solid #d4d4d4; } .space { height: 34px; overflow: hidden; width: 100%; } ``` http://jsfiddle.net/5ZEqL/2/

Original source