homepage Welcome to WebmasterWorld Guest from 23.21.9.44
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4435518
 8:02 am on Mar 31, 2012 (gmt 0)

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>

 

Paul_o_b




msg:4435615
 4:31 pm on Mar 31, 2012 (gmt 0)

Hi,

There is no default for line-height other than "normal" which is down to the UAs concerned to decide what normal actually means. You need to set the line-height in your base stylesheet just as you would set margins and padding for most elements a sthey vary greatly between browsers.

Form The mozilla docs:

normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.


Leave nothing to chance and use the settings that you need and not what the user agent thinks you may need.

There will still be differences due to rounding errors (especially with line-height) so don't look for absolute pixel perfection.

gcan




msg:4435843
 12:26 pm on Apr 1, 2012 (gmt 0)

Paul_o_b, thank you. I added "line-height" to the "body" and now everything looks OK.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved