@noonnope - Amongst programmers, ROUND is considered the ‘incorrect’ behavior because it’s a long logic operation, while trunc is a simple math operation. Difference between 80 clock cycles on a 8088 and 2 clock cycles… and even though today it’s only the difference between 4 clocks and 1, the preference for the simpler operation remains.
That said, there is NO proper behavior to say “do it right” – because the specification does not actually say how fractions of a pixel should be handled by the UA.
Though rounding off is just the tip of the iceberg when it comes to line-height issues. One of my core rules for making sure my code is predictable cross-browser is “You CANNOT trust the default or inherited line-height, so you MUST always redeclare line-height when you change font-size”.
The default line-height isn’t even defined in the specification and is COMPLETELY left up to the user agent. The MOST you will find is the SUGGESTION that user agents use 110% to 130%… which is why MOST browsers (but not all) default to 120%. For the most part you can assume 120% to be the default, but it often seems that Gecko based browsers randomly use 115% to 125% depending on font-face and font-size. This can REALLY drive you nuts looking at pages written in FF on some linux distro’s.
side note – This is more ‘proof’ in the specification of the original intent; not saying how things should appear and leaving that up to the User Agent. Whenever anything about appearance is in the HTML 2 and 4 specifications you will see words like “may” and “often” and not words like “should” or “must”.
Unlike every other browser maker under the hood gecko keeps track of ALL fractions regardless of how they are rounded during rendering. This means if you have a line-height that by the math works out to 10.4px, three elements of that size in a row will render at 10 (10.4), 11 (20.8) and then 10px (30.2) again. THAT can really drive you nuts and is part of why every other browser rounds down and throws away fractions; it’s also part of why gecko’s renderer is often slower than even IE 6 on certain things!
Then you have the issue of odd inheritance; there’s an example I use to show this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<style type="text/css">
body {
padding:8px;
}
div {
margin:0;
padding:0;
}
#linkHeights {
font-size:20px;
line-height:200%;
}
#linkHeights div {
font-size:14px;
background:#CCC;
}
#linkHeights .test2 {
line-height:200%;
background:#EEE;
}
</style>
<title>
Line-Height Oddity Demo
</title>
</head><body>
<div id="linkHeights">
<div class="test1">
Test
</div>
<div class="test2">
Test
</div>
</div>
</body></html>
You try that out and .test1 will end up 40px tall, while .test2 will end up 28px tall despite BOTH having 14px fonts declared on them and 200% line-height. This is because percentage line-heights are calculated and then inherited as PX. This one can REALLY make you tear your hair out.
Bottom line, ALWAYS redeclare your line-height when you change font-size; which is why I always just use the condensed font property and redeclare style and face too since it ends up about as many characters as declaring font-size and line-height separately.
That said, I’m wondering why you bother having two separate elements for that… AND why you have an id on the inner element.
<div id=“bagfloat”>4</div>
with this for CSS:
#bagfloat {
position:fixed;
bottom:10px;
right:2%;
z-index:98;
width:83px;
padding:9px 0 54px;
text-indent:64px;
font:normal 18px/20px arial,helvetica,sans-serif;
color:#444;
background:url("../images/shoppingbagfloat.png") 0 0 no-repeat;
}
Mind you I’m just guessing, but really there should be no need for that extra element since you can just skip declaring height and use line-height + padding to add up to the 83px, then use text-indent to push the text over that 64px you seem to want.
