Cross-platform multiple line inline element text height inconsistencies

Hello,

I have not been able to find any reference to the issue of cross-platform multiple line inline element text height, if this has been discussed I would appreciate being pointed in the correct direction please.

A visitor to my site where I experiment with various web technologies pointed out that on Linux she was not able to see an anchor when registering. The font size varies between Windows and Linux (I use XP and generally test Linux using Kubuntu for KDE/Konqueror) and has created some considerable inconsistencies when rendered between platforms.

The issue stems from list items where the li elements vary in height. Using all the related properties I could think of (line-height, height, overflow, font-family, font-size (and all unit types), etc) I was unsuccessful in finding a cross-platform way to have browsers render the same height for list items which span multiple lines.

In example...

<ul>
 <li><span>A single line list-item.</span></li>
 <li><span>A multiple-line list-item with a \r\n line-break due to ul parent width.</span></li>
</ul>

I have also considered the effects of differing DPI though due to my somewhat limited skill with Linux I was not able to determine the DPI however I have noticed font-size differences with pretty much every Linux distribution I have tested.

One of my approaches was to set a static height to li elements however I am not aware of any property that can help maintain height on inline elements spanning multiple lines. I'm also not certain which CSS module(s) are most relevant to this issue though I am interested in further discussing this with the group and/or with the editors working on the relevant modules please.

John Bilicki III
http://www.jabcreations.com/

Received on Monday, 2 July 2012 02:32:43 UTC