Ellen Herzfeld wrote: > I had never really gotten into line heights. From > my readings on the subject in _CSS: the > Definitive Guide_ I had retained that the best > way to set line height was to use raw numbers. > This I mostly did, unless it didn't work for some > reason and then I used ems or percentages. But I > noticed recently that some menus using lists > really didn't look the same in Firefox and > Safari. In Safari, the lines were much closer > together. The line-height was set with raw > numbers. If I set it to the same value in ems, > the discrepancy mostly disappeared. So I did a > bit of experimenting here: > http://ansible.xlii.org/web_design/CSS/line-height.html [...] > Any thoughts?
That's interesting. I don't known exactly what happens in Gecko and Safari, but I think the differences all simply due to different rounding methods employed in the different cases. In theory there should be no differences when using on an single element the raw number or its equivalent "em" or percentage value (what varies is the inheritance method.) Indeed the differences that show up in Gecko are considered a bug [1]. What probably happens is that, when roundings are necessary (most of the times), the chosen rounding is different depending on the unit used (and on the browser.) Indeed there is perfect consistency if you express the font-size in px, and then use a line-height which doesn't require rounding. For example: font-size:16px; line-height:1.25 (or 1.25em or 125%) In this case I see perfect consistency between Mozilla and Safari, provided that NO text-zoom is applied. Of course we cannot rely on round figures, most of the times roundings are necessary. Also what you noticed, that using keywords for font-size gives more consistent results, is only true as long as no text-zoom is applied: increase the text (with the browsers menus) and you will see (both in Gecko and in Safari) that this "more coherence" is only apparent: The reason is that, at default settings, a keyword like font-size:small provides a round starting pointing (for example 13px), while something like font-size:76% gives an already fractional starting point (for example 16px * 76% = 12.16px. Add to this a line-height of 1.4 and you see the necessity for rounding: 12.16*1.4=17.024, and 12*1.4=16.8. What line-height should be used, especially when many consecutive lines are involved? Always 17px? Or it is better to mix slightly different values, in order to maintain in the long run a better approximation for the fractional value requested? And in the latter case which fractional value try to get, the 12.16*1.4 or the 12*1.4 ?) To summarize: In my opinion the differences are due to different roundings algorithms. What is unfortunate is that the same browser apply different roundings depending on the unit used to expressed the line-height, I don't see any reason for this. Bruno [1] https://bugzilla.mozilla.org/show_bug.cgi?id=196270 ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
