Hi,

I want to display some text, using a floating DIV to place it inside some boxes painted on an image background.
The problem is on a Linux system, where the default value of line-height seems to be 1.52 instead of 1.2, as I read it should be (both Mozile & FireFox).
Because of that, the text gets out of the intended graphic boxes (at the bottom).

I have in my .css
BODY{ font-family:Arial; }
DIV.floater{ font-size:13px; position:absolute; color:#000000; z-index:2; }
And I didn't know of the line-height property until now.

If I set line-height:1.2 in the floater DIV, everything looks OK, like on my Windows system.


My questions are:
Is this a common thing, that the default value of "line-height" is different, or it's a different cause? (font sizes looks the same, though I can't compare precise screenshots).
Is it a good practice to set it to the default 1.2 value, to make sure it stays that way, no matter what?
Is this approach save, for my purpose of having the text of the same size (fit in the same size rectangle) on any browser/system ?
Is Arial font OK, or should I use (or add) Helvetica?

Thank you!

The default line-height generally equals the font-size.

See :
http://htmlhelp.com/reference/css/text/line-height.html
http://www.wpdesigner.com/2007/06/21/web-t...y-line-spacing/
http://webtypography.net/Rhythm_and_Propor...l_Motion/2.2.1/

Arial is nowadays present in most OS systems, but to be sure, add a generic sans-serif:
BODY {
font-family:Arial, sans-serif;
}

It's common for browsers to have different default values for CSS properties, yes. The line-height property is just one of them.

Except for the "no matter what" part, it's fine. CSS is optional. See also Web pages aren't printed on paper and "How Do I Force...?"

Positioning content over specific regions of a background image is an especially fragile way to design a web page. You don't control the font size. MSIE allows users to ignore document font sizes. Better browsers provide a minimum font size setting.

Is there any harm in providing Helvetica as an alternative after Arial?

They say Helvetica is better looking, so maybe it should be before Arial.

I just tried a page with some lines of text, no CSS, in two browsers on Linux and IE on Win. I saw no difference at all in the line height. I don't have an eye for font matters, but I think I would see a big difference if I looked for it.

Maybe something for you to read, Pandy.

http://ilovetypography.com/2007/10/06/aria...rsus-helvetica/
and http://meiert.com/en/blog/20080220/helvetica-arial/

Thank you for your advice!

I know the idea is to have dynamic layouts, and to allow the user to have his own font settings and so one.
But in this case, I have very little text, and I want it to stay within the specified boxes.

Here is the site link, so you can see exactly what it is about (please don't make it public yet):
UnderDevelopmentSite

Let me know what you think about this font size issue, and what is the best way for my case.

Of course, one idea is to have some of the text as images, but that would take longer to load. And some needs to be dynamic (php changed).
Or I could use flash objects with just text (swf) for the text boxes?
I don't want to make it all in flash, though.

And another thing, I don't want it to work on everybody's system, no matter what.
Just to work for most of the users and the common browsers.

Thanks!

PS. I found out about the validator tools (css & html) and I'll fix the errors they report later.

"A number of the glyphs are almost identical, and even an expert would have difficulty telling them apart"
Exactly my point!
Nice page though.