?

Log in

No account? Create an account
HTML question - Phil's Rambling Rants
September 11th, 2008
09:55 am

[Link]

Previous Entry Share Next Entry
HTML question
What is the simplest/best way to control the line spacing of HTML lists?  I'm specifically talking about putting a list in an LJ entry, so I don't have a separate style sheet I can reuse and I want something concise.  Specifically, I want to avoid having any extra blank lines before and after the list and between the items.

I want HTML that looks like this:

Regular text
<ol>
<li>Item</li>
<li>Item
Second line of item</li>
<li>Item</li>
</ol>
Regular text

That renders like this when LJ displays it (line spacing only, I'm not showing the indenting):
Regular text
1. Item
2. Item
Second line of item
3. Item
Regular text

As opposed to
Regular text


1. Item

2. Item
Second line of item

3. Item



Regular text

For reference, the sample above with the <'s not escaped actually renders like this.  It does look like the immediately above text in my journal on my browser.

Regular text

  1. Item

  2. Item
    Second line of item

  3. Item


Regular text


Also: do best practices include a </li> at the end of each item?  I thought all tags were supposed to have ends, but the examples on the W3C web site don't use </li>. Hah, I answered a part of my own question: if I leave out the </li> it doesn't put a space between the items, but it still puts extra lines at the beginning and end. But I want to know if leaving out the </li>s is going to screw up somebody else's browser. Or if putting them in does.

Yes, I did spend some time trying to look this up myself, but I don't want to spend all day learning HTML.  So please don't point me at a reference web site unless you can point me to a specific page on that web site that answers my question.

Tags: ,

(7 comments | Leave a comment)

Comments
 
[User Picture]
From:phillip2637
Date:September 11th, 2008 03:49 pm (UTC)
(Link)
LiveJournal, as opposed to a normal web page, includes the actual new lines that you type between tags when it renders the output. This means that you get a different result depending on whether you type your 'ol' and 'li' entries and their closing variants all on one line or each on its own. (In general, I believe in closing tags, but that may be because I spend far more time with XML than with HTML.)
[User Picture]
From:tigertoy
Date:September 11th, 2008 04:01 pm (UTC)
(Link)
Exactly. LJ includes the line breaks I type, and I don't want additional line breaks forced on me by the HTML tags. Though I confess I wasn't thinking when I put the ol on a separate line from the li in my example; that accounts for one of the unwanted blank lines. I could use the lj-raw tag, but then I'll have to explicitly type some br tags. Bleah. Might be the best I can ask for.

Leaving out the closing tag means I don't get an extra line break. Is it safe?
[User Picture]
From:tigertoy
Date:September 11th, 2008 04:03 pm (UTC)
(Link)
Let's try this (wrapping the "what I want it to look like" in lj-raw, adding one explicit br in the two line item.

Regular text
  1. Item
  2. Item
    Second line of item
  3. Item
Regular text
[User Picture]
From:tigertoy
Date:September 11th, 2008 04:04 pm (UTC)
(Link)
still an extra blank line before and after the list.
[User Picture]
From:polyfrog
Date:September 11th, 2008 04:56 pm (UTC)
(Link)
That is the best I have found as well. I have not found any way to eliminate the blank lines before and after the list.
[User Picture]
From:phillip2637
Date:September 11th, 2008 04:26 pm (UTC)
(Link)
I don't know for sure whether it's generally safe. What I was suggesting, I guess, is to accept the HTML-induced line breaks, but remove the literal ones that are typed when composing the message.
[User Picture]
From:backrubbear
Date:September 12th, 2008 02:38 am (UTC)
(Link)
The end tag for LI is an XHTMLism. Under HTML 4.0, you probably shouldn't have them. Indeed, I think under some people's journal styles, the end tag will render as yet another newline.

One of the options you should have available for posts is to disable LJ's formatting via checking "disable auto formatting". However, at that point, you're completely responsible for encapsulating your content with paragraph and line break tags.

I've largely just taken to putting all list stuff in a single line and that bypasses the problem. I suspect you could get some similar behavior without doing that cramming by overriding the CSS via a style attribute for the list. If you're interested enough, I'll dig through the CSS2 specs.
Powered by LiveJournal.com