Forum Moderators: open
Here's a much-reduced testcase (replace "LOTS OF TEXT" with lots of text). The border and special font sizes are to exaggerate the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body style="font-size:2em">
<div style="border:1px solid"><span style="font-size:0.5em">Lorem ipsum dolor ..LOTS OF TEXT...Ut quis ante. </span></div>
</body>
</html>
You'll get the idea if you just render this on IE and Firefox, and note the difference. The spacing is unnecessarily large on Firefox. On IE it looks right. Also, if rendered using Transitional DOCTYPE, it looks right (i.e. tight spacing).
The problem as I said is the line spacing. What seems to be happening is that the DIV is using the large font size, and using it for line spacing, even though the only thing inside of it is a SPAN with a smaller font size.
I realize I could just move the font-size from the SPAN out to the DIV, and I would get the desired behavior.
But I cannot do this because the <div> and </div> are generated by one system, and the content is dynamically created (like little portlets). If the portlet wants to show small text, like in this case, this large line spacing is imposed on it.
How can I avoid the large line spacing on the SPAN inside the DIV?
I hope this belongs here and not the CSS forum.
I've struggled with reading the W3C's visual formatting model [w3.org] to get a theoretical handle on this and my eyes are going crossed! But for practical purposes, note that if you use <p> which is block-level, instead of <span>, then the difference between the two browsers vanishes.
I need the elements to be inline, because there may be a series of them that must appear on the same line.
How can I avoid the large line spacing on the SPAN inside the DIV?
Wouldn't you use specificity in the style sheet and make sure that span is included in the style? I think I know what your talking about and I just ran into this recently. It was because I use specificity in my style sheet and I had to include the span.
My understanding is that applying font size to the body element does not cascade down through to all elements. :(
I hope this belongs here and not the CSS forum.
I think it is going to end up at the CSS forum. ;)
