label and line-height

line-height validation error?

[sc112]

I have these styles for a search box inside a form:

input .box {

float: right;
font-size: 1em;
width: 100px;
border: 1px solid red;

}

label {

float: right;
width: 5em;
font-size: .7em;
line-height: 2;

}

The above styles when passed through the CSS validator, give this error message:

Line: 36 Context : label
Invalid number : line-height Parse Error - [empty string]

I checked out the w3.org website, but still don't understand what "empty string" refers to. The page validates as XHTML 1.0 Strict, and renders exactly as I anticipated in FF/IE/Opera. What error have I made here?

[bedlam]

line-height: 2;

Add a unit to this declaration. 2 of what?

-b

[sc112]

But you don't need a unit on line-height. Quote from w3.org:

The three rules in the example below have the same resultant line height:

DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */

[w3.org...]

[SuzyUK]

2 is perfectly OK

~ line-height is one of those little anomalies and the 2 actually means 2 x the font size, or 200% of it.

sc112, it's a validator bug, apparently reported some time ago by Dave Shea too (Oct'05)

and also, though I haven't tested it, I read the error report can be avoided by putting 2.0 instead of just 2, would you like to try that and report back?

[sc112]

Thanks Suzy. Using 2.0 did indeed get rid of the error report. Wonderful to get a clean report even though the page worked as it was.

[SuzyUK]

Thanks for reporting back, sc112..

and I'm glad it worked, it is nice to get that error free report, especially after paying so much attention to the details :)