Forum Moderators: open

Message Too Old, No Replies

Double line-breaks preceding <OL>

How do I get rid of them?

         

mikegram

7:12 pm on Jul 21, 2002 (gmt 0)

10+ Year Member



Looking for a simple way to get rid of the space between text and an ordered list that follows if it's possible. Maybe something in CSS?

change:
text text text text text text text text text text
text text text text text text text text text text

1. list item
2. list item

to:
text text text text text text text text text text
text text text text text text text text text text
1. list item
2. list item

tedster

7:23 pm on Jul 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The top set of text is a different block - probably a paragraph. Then the OL is another block. So you need a margin-bottom of 0em on the paragraph and a margin-top on the OL of 0em. If either one has a positive margin, then that margin will be rendered.

p.follow {
margin-bottom:0em;
}
ol {
margin-top:0em;
}

For this HTML:

<p class="follow">text text text text text text text text text text
text text text text text text text text text text</p>
<ol>
<li>list item</li>
<li>list item</li>
</ol>

mikegram

7:36 pm on Jul 21, 2002 (gmt 0)

10+ Year Member



Thank you, Ted. That works just fine.

piskie

10:33 pm on Jul 21, 2002 (gmt 0)

10+ Year Member



Tedster, have you ever thought of writing a book titled maybe:
How to solve...........

rewboss

9:13 am on Jul 22, 2002 (gmt 0)

10+ Year Member



Note that "double line break" is the wrong terminology here. It is the space you get between block-level elements.

That may seem a trivial quibble, but if you want to understand how to use CSS and HTML properly, you have to get away from viewing it the way you do a typewritten (or even word-processed) document.

mikegram

1:43 pm on Jul 22, 2002 (gmt 0)

10+ Year Member



This is a good point. I do sometimes get confused between using my typewriter and coding HTML. I nearly described the space as "double carriage returns".

sparrow

1:46 pm on Jul 22, 2002 (gmt 0)

10+ Year Member



tedster,

could you just format the <blockquote> tag instead?

papabaer

2:41 pm on Jul 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



With CSS you can control the default spacing of any element or element grouping: paragraphs, lists, headings, forms and blockquotes to name a few. The controls are gained by applying margins and padding.

Keep in mind that the default spacing applied to an element can be directly affected by declared line-height.

For instance: the default spacing between paragraphs may display diffently between the two following examples:

example #1

body {
font:11px/13px;
}

example #3

body {
font:13px/15px;
}

example #3

body {
font:12px/16px;
}

Test, test, test!
Learn to recognize the default spacing between elements and the methods available to control them.

Below is Tedster's example as applied to a blockquote:

p.follow {
margin-bottom:0;
}
blockquote {
margin-top:0;
}

tedster

3:49 pm on Jul 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The key to this one (as applied to lists) was something I only understaood a few weeks ago. I hadn't understood that OL and UL were separate blocks. I always thought of a list as part of a paragraph, but it isn't.

In getting a new site to validate, I had an error on a setup like this:

<p>
<ul>
<li></li>
</ul>
</p>

The </p> tag threw an error...and then the light went on.

Tedster, have you ever thought of writing a book titled maybe:
How to solve...........

LOL! Things is, I am a crazy perfectionist with pit bull tendencies. When I want to do something, I don't let go until it's done the way I want to do it. So, even in the crazy world of coding for web pages, I have pushed very hard to get the results I envision.

A book? If things ever stop changing so fast, I might think about it!