XHTML Strict Display Problem

[shane.carr]

I seem to be having problems with the layout of various divs when using XHTML Strict. The code works fine in XHTML Transitional.

Here are two demonstrations of the same code. The only difference is the doctype:

XHTML Transitional Demonstration (http://code.sffc1.com/xhtml_div_height_problem/transitional.html)
XHTML Strict Demonstration (http://code.sffc1.com/xhtml_div_height_problem/strict.html)

What in the XHTML Strict declaration is causing this problem? Thanks in advance.

P.S. I know this problem exists in Safari, Opera, and Firefox 2, but I haven't checked IE or Firefox 3.


.

[felgall]

Move the font-size from the span to the surrounding div. The problem is that your div to position the first 10 has a font size that puts the 10 at the bottom of where the character should go and the changed font size on the span is making the 10 smaller while leaving it where it would need to go if it were the font size specified for the div.

With all the span tags removed and the font sizes moved to the div that wraps that span everything ought to move back where it belongs.

[shane.carr]

Thanks for the response :)

When I tried moving the font-size from the span to the div, it kind-of worked, but my original purpose for putting the font-size in the spans is defeated. When writing my javascript for displaying cards, I lightly followed a tutorial that I found online. Since the tutorial used ems rather than pixels, I did the same. So, when I move the font-size to the divs, the actual position of the divs change. Here is another demonstration:

Transitional (http://code.sffc1.com/xhtml_div_height_problem/transitional_divfontsize.html)
Strict (http://code.sffc1.com/xhtml_div_height_problem/strict_divfontsize.html)

What's the problem now? Maybe something with line-height?

P.S. I added an option so you can display different cards.

.