HTML & Bullet Lists - Solving the Return-Break 'Gap' Problem

[Shaun]

Hello I was wondering if there is a way to solve the gap problem that
occurs with bullets. What I want is a bullet list to look like this:

Item here
-A
-B
-C
-D

Usually with bullets it looks like this:

Item here

-A
-B
-C
-D

With the unwanted gap (<br> type) between 'Item here' and 'A'. One
close, but not quite, solution I found is if you code like this:

<ul>
Item here
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

The close but still bad result is:

Item here
-A
-B
-C
-D

Does anyone have anyway to get rid of the gap between 'Item here' and
'A', including CSS type techniques?

Thanks for your help!



Keywords: bullet list, gap, UL, LI, BR, hard return, space

 

[David Dorward]

Hello I was wondering if there is a way to solve the gap problem that
occurs with bullets.

margin property

 

[Jukka K. Korpela]

With the unwanted gap (<br> type) between 'Item here' and 'A'. One
close, but not quite, solution I found is if you code like this:

<ul>
Item here
<li>A</li>

It's invalid markup. Far from being a solution, it creates a set of new and
unknown problems.

Instead, use CSS to deal with rendering. In practice, the gap is caused by
the default top margin for <ul>, but it's safest to set the top padding to
zero as well:

<div>Item here</div>
<ul style="margin-top: 0; padding-top: 0">
<li>...</li>
...
</ul>

Naturally, the style sheet should be put into a separate file etc.; the
above is just a quick sketch to illustrate the idea.

 

[Lauri Raittila]

The problem is setting margin-top and padding-top to 0 does not work
since it seems to be the default. Setting it to -20 seems to work
though:

<p>bbb</p>
<ul style="margin-top: -20; padding-top: 0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Well you use p element instead of div. P element usually has 1em bottom
padding.

You also tested only in quirks mode, as "margin-top:-20" equals "",
because you don't include unit.

 

[Lauri Raittila]

The problem is setting margin-top and padding-top to 0 does not work
since it seems to be the default. Setting it to -20 seems to work
though:

<p>bbb</p>
<ul style="margin-top: -20; padding-top: 0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Well you use p element instead of div. P element usually has 1em bottom
margin.

You also tested only in quirks mode, as "margin-top:-20" equals "",
because you don't include unit.

 

[Shaun]

It's invalid markup. Far from being a solution, it creates a set of new and
unknown problems.

Instead, use CSS to deal with rendering. In practice, the gap is caused by
the default top margin for <ul>, but it's safest to set the top padding to
zero as well:

<div>Item here</div>
<ul style="margin-top: 0; padding-top: 0">
<li>...</li>
...
</ul>

Naturally, the style sheet should be put into a separate file etc.; the
above is just a quick sketch to illustrate the idea.

Thanks for your help!

The problem is setting margin-top and padding-top to 0 does not work
since it seems to be the default. Setting it to -20 seems to work
though:

<p>bbb</p>
<ul style="margin-top: -20; padding-top: 0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Thank you, bye for now,

Shaun

 

[Steve Pugh]

The problem is setting margin-top and padding-top to 0 does not work
since it seems to be the default. Setting it to -20 seems to work
though:

-20 what? There are many length units in CSS. How is a browser
supposed to know whether you mean 20 inches or 20 cm?

<p>bbb</p>
<ul style="margin-top: -20; padding-top: 0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Did you also set the margin-bottom for the paragraph before the list
(or why not use a div, which has no deafult margin bottom, as Jukka
suggested)?

Steve