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:
Paragraph Title Here
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:
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:
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:
... 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:
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.
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.
this might come in handy as well
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.
What's the deal with IE?
I appreciate the help!
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.
or a url for us who like to actually *see* the code in action
Here ya go
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.
That's just IE's default line-height.
Change it to:
in the li style
Hey, that worked great.. I appreciate it!