Firefox shows different line-height in Windows Vista and Windows 7

Hello,

A few days ago I purchased a new computer with Windows 7 and discovered that Firefox's 11.0 version doesn't show the same design in Windows Vista and Windows 7 computers. After some investigation I discovered that "line-height" in Windows 7 is bigger than in Windows Vista. So, my website's design in Windows 7 is destroyed and I have to add "line-height" directive to the stylesheet if I want the same results in Windows Vista and Windows 7.

This happends only with Firefox. All other browsers display the same design in Windows Vista and in Windows 7.

Any ideas why it happends and how can I fix it without adding "line-height" to the stylesheet?

Below are a code sample.
Screenshot: [i40.tinypic.com ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
html{height:100%;}
body {margin:0px;padding:0px;color:#333;font:11px verdana,tahoma,arial,helvetica,sans-serif;}
 
#wr {height:54px;background:#dedede;margin-bottom:4px;width:200px;}
#menu {padding-top:7px;margin:0;color:#fff;font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;white-space:nowrap;list-style-type:none;font-weight:700;}
#menu li,.main-menu li.selected{display:inline;}
#menu li a,.main-menu li.selected a{margin-right:2px;font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;text-decoration:none;float:left;}
#menu li a{padding: 4px 8px 4px 8px;background:#FFBA00;color:#602C05;border-bottom:2px solid #76A203;}
#menu li.selected a{padding:4px 8px 4px 8px;background:#BCE849;color:#39731F;border-bottom:2px solid #BCE849;}
#menu li a:hover{background:#BCE849;color:#602C05;}
#menu li.selected a:hover{color:#4FA02C;}
</style>
</head>
<body>
<div id="wr">
<ul id="menu">
<li class="selected"><a href="/home.php">Home</a></li> 
<li><a href="/photos.php">Photos</a></li>
<li><a href="/video.php">Video</a></li> 
</ul>
</div>
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
test test test test test<br />
</body>
</html>

Firefox shows different line-height in Windows Vista and Windows 7

gcan

Paul_o_b

gcan

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week