CSS mystery

**macgruder** · Apr 08th, 2004, 09:24 AM

This makes no sense to me. Why is the grey box 12px high. Testing in Safari and Firefox?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>CSS Test</title>
</head>
<body>

<p style='background: #900'>
<span style ='font-family: geneva;
line-height: 18px; font-size: 10px; margin: 0; padding:0; border: 0; 
background: #ddd'>

The line height of this text is 18px, and the font-size is 10px. Margin, Padding and Border are set to Zero.
Now according to Eric Meyer: "the Inline Box will always be equal to the value of the line height,
and the content area is the same as the font-size".  Why is this grey box 12px high?
</span>
</p>
</body>
</html>

Edit: removed the 'So why then is
there a gap between these lines?'. That is obvious. The real point is the 12px high bit.

**Web Design Forums** · Apr 08th, 2004 09:24 AM

**filburt1** · Apr 08th, 2004, 09:54 AM

Always use double-quotes, not single-quotes. Also, unrelated to the problem, #DDD is not a fully-qualified color code. Use #DDDDDD for a moderately light gray, or any other six hex digits.

Try validating your code to catch any more problems, then reply back: http://validator.w3.org/ .

**glyakk** · Apr 08th, 2004, 10:30 AM

I tested the css you posed and the grey box is 36 pixles heigh in firefox. I think you mean the red box is 12px high. Line height does not define your content area.. it defines where your text will be written, that is why you are getting the gap between the lines.. you have a linehight of 18px but your content area is set according to the text size(witch is smaller). so if you had a lineheight of 10 you would loose the gap. Line height is sorta like adding margin to inline elements. its the difference between two lines of text. If you have ever used a type writer, line height would be how far the roller would feed your paper each time you added a new line.

So say for instance i had a line height of 36px. Each time the text would wrap to the next line the baseline of the text would jump down 36pixles. but the content area would not change size.

Filbert1,
#DDD IS valid shorthand for #DDDDDD the same goes for #FC3 witch is shorthand for #FFCC33.

**karinne** · Apr 08th, 2004, 11:00 AM

Originally posted by glyakk
Filbert1,
#DDD IS valid shorthand for #DDDDDD the same goes for #FC3 witch is shorthand for #FFCC33.

yep yep!

**justlivyalife** · Apr 08th, 2004, 11:44 AM

AFAIK, there is no problem using 'Triple Hex' codes; http://www.december.com/html/spec/color3hex1.html has a list of the codes usable.

**karinne** · Apr 08th, 2004, 11:59 AM

Originally posted by justlivyalife
AFAIK

what does that mean?!

**justlivyalife** · Apr 08th, 2004, 12:00 PM

As Far As I Know

**smoseley** · Apr 08th, 2004, 12:09 PM

I had never seen three-digit hex before this thread. It makes sense, though.

**karinne** · Apr 08th, 2004, 12:09 PM

ah... good to know!

thx

**smoseley** · Apr 08th, 2004, 12:14 PM

Here's the W3C DTD for color data types (for HTML):

http://www.w3.org/TR/html4/sgml/loosedtd.html#Color

Here are the notes:

http://www.w3.org/TR/html4/types.html#h-6.5

Here's the CSS1.0 spec for colors:

http://www.w3.org/TR/CSS1#color-units

As you can see, CSS allows 3-digit colors, while HTML does not.

Thread: CSS mystery

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions