9 replies [Last post]
earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 11 years 37 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

I've been told that it's bad to break to text with <br /> tags and that I should use an unordered list, paragraphs or headers instead.

Unordered lists are lame because of the left indent.

Paragraphs and headers would work fine, but I can't seem to get the line-height to get the lines close enough. Seems like it gets to 5% and quits subtract space.

I need my lines close like this:

Quote:
Paragraph Title Here

Sentence
Sentence
Sentence

I've been trying to use header tags and paragraphs like this:

<h1>Paragraph Title</h1>
<p>Sentence</p>
<p>Sentence</p>
<p>Sentence</p>

But... then I can't get the line-height to work. I'm using this:
line-height: 1%;

Thanks!

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 32 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Line Height?

Your need to look at using margin declarations rather than using the line-height declaration.

Firstly, unordered lists are your friends. A little margin magic will make the indent disappear. Try your unordered list again, but add to the ul CSS rule:

ul
{
margin: 0;
padding: 0;
}

Ordinarily just margin 0 would fix the indent, but different browsers use either the margin or padding attribute to create the indent. Thus, you need to zero both.

The same rules apply to paragraph and heading line breaks. Using:

p
{
margin: 0;
}

... will make all paragraphs sit together without any clear space after (or before) each paragraph. You could change this as so each paragraph only has space after itself with:

p
{
margin: 0 0 1em;
}

... using ems is a good idea since it will maintain the same line-height as the rest of the text (if the text is generally set to something like 14px line-height, then the em will be 14px line-height).

Same rules apply to headers.

The next sentence is true. The previous sentence is false. Discuss...

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 11 years 37 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Line Height?

Ahhhhh man, why didn't I think of that!? Set the margins inbetween the lines!

Thanks for the tip! I'm sure this will solve lots of problems.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 13 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Line Height?

this might come in handy as well

http://www.alistapart.com/articles/taminglists/

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 11 years 37 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Line Height?

I've got everything running good. I've managed to delete the margins and padding between my line items, but it's not working in IE6. There is still gaps when I use IE, but it works fine with Mozilla and nutscrape.

Any suggestions?

What's the deal with IE?

I appreciate the help!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Line Height?

Hi Skillet

I think now would be a good time to post a complete sample of page code with inline style (no gfx) so we can play with it in full.

Trevor

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 13 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Line Height?

or a url for us who like to actually *see* the code in action

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 11 years 37 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Line Height?

Here ya go

http://www.expresiv.com/test.html

You'll notice spacing between the lines of text towards the bottom. The space only shows up with IE.. but works fine with Mozilla and Netscrape.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Line Height?

Hi

That's just IE's default line-height.

Change it to:

line-height:120%

in the li style

Trevor

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 11 years 37 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Line Height?

Hey, that worked great.. I appreciate it!