Thu, 2004-04-01 22:04
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!
Thu, 2004-04-01 22:14
#1
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.
Thu, 2004-04-01 22:23
#2
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.
Fri, 2004-04-02 13:28
#3
Line Height?
this might come in handy as well
Fri, 2004-04-02 18:16
#4
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!
Fri, 2004-04-02 19:23
#5
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
Fri, 2004-04-02 19:46
#6
Line Height?
or a url for us who like to actually *see* the code in action
Fri, 2004-04-02 21:04
#7
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.
Fri, 2004-04-02 22:34
#8
Line Height?
Hi
That's just IE's default line-height.
Change it to:
line-height:120%
in the li style
Trevor
Fri, 2004-04-02 22:44
#9
Line Height?
Hey, that worked great.. I appreciate it!