CSS line height confusion Options

[johnminkough]

Hi

I'm struggling to understand CSS, with mixed results.

For example, on this page:

http://johnminkoff.com/resumestatement2012.html

...there is extra space under the headings "Teaching" and "Collections"

If I hit delete after one of these headings, the heading and the text below it become part of the same line. Then if I hit return I go back to having too much space. I can
achieve no middle ground.

Nothing I do with the linked CSS file seems to change this.

The other resume sections currently have no extra space between heading and text, but if I start messing with them, I
get the same result as seen on "Teaching" and "Collections" and can only eliminate the extra space with an undo.


Here is the linked CSS file:

p {
font-family: Courier New, Courier, monospace;
line-height:normal
font-size:12px;
}

body {
font-family: Courier New, Courier, monospace;
line-height:normal
font-size:12px}

td {
font-family: Courier New, Courier, monospace;
line-height:normal
font-size:12px
}

th {
font-family: Courier New, Courier, monospace;
line-height:normal
font-size:12px}.footer {
position: relative;
right: 10px;
}.disclaimer{font-size:15px}
.name {
font-style: normal;
font-weight: bold;
}
.disclaimer2 {
font-size: 12px;}
.grey {
color: #999;
}.arrow{
position:relative;
top:19px;
}
.thing{line-height:normal}

Any help would be great.

Thanks.

[Darin McGrew]

The online tools report markup and CSS errors, including some related to your line-height properties:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

[pandy]

The markup is different for almost every section. That's why they display differently.

The text following "Teaching" is in a P. The same goes for "Collections" but there the heading itself is also in a P. "Education" on the other hand uses no Ps at all.

Most block level elements are given margins by the browsers. That's why Ps display as paragraphs even if there is no author style sheet involved. There can be both top and bottom margins, that depends on the browser.

Use the element that's appropriate for the text, but style it to look as you want. Add margins, remove margins... In this case the headings should be marked up as headings, with H(n), and the lines that follow them could maybe be seen as a list.

[johnminkough]

OK, thanks.

Probably the main lesson here is that applying css
to my hodgepodge know-nothing html coding of several years
ago is going to raise problems.

I'll probably just start over on the resume section at some point, or at least
do a major overhaul.

If I understand correctly, my problem is one of margins, not line height. Good to know.

[johnminkough]

Gotta say that those jigsaw results aren't making much sense, though.

I'm supposed to add a semicolon BEFORE THE PROPERTY NAME? Doesn't that go after the value?

This post has been edited by johnminkough: Feb 28 2012, 06:21 PM

[pandy]

I agree it could have been expressed better. If they had flagged 'font-size' and said the same thing it would make more sense.

I often find the CSS checker a little odd this way, or maybe it's just because I think the WDG HTML validator is perfect. With the CSS checker it isn't always clear to me where the error actually occurs until I find it in the style sheet. For a person that doesn't know CSS very well yet that can be really, really confusing.

[pandy]

And yes, the semicolon goes where you say it does.

[Christian J]

I'm supposed to add a semicolon BEFORE THE PROPERTY NAME? Doesn't that go after the value?

That's actually the same thing(*). Or more correctly, it should go in between. When a property value is followed by another property name, separate them with a semicolon. Line-breaks don't matter though, so the following rules are equal:

CODE

html {foo: 1; bar: 2; baz: 3;}

CODE

html {
foo: 1;
bar: 2;
baz: 3;
}

CODE

html {
foo: 1
;bar: 2
;baz: 3;
}

(*) The exceptions are before the first property name and after the last property's value, where you don't need a semicolon --I always add one anyway, for good measure.

[johnminkough]

Right it's usually the same thing, but to phrase it as "semicolon before the property" is to create confusion.

The jigsaw results were also strange because there were in fact semicolons following the preceding value/before the property in
question. It missed them.

[Frederiek]

But neither line-height properties have a semicolon at the end of their values.

As a side note, the name of your CSS file is inaccurate now that the declared font is Courier.

[pandy]

It isn't the same thing when it's related to a specific declaration and property name - as it actually is in the validator result. It's easy to think it refers to the property name that is flagged. It should say "before the NEXT property name".