Welcome to WebmasterWorld Guest from 54.166.227.36

Forum Moderators: not2easy

Message Too Old, No Replies

Increasing space between BR list items

     
9:36 pm on Jul 20, 2004 (gmt 0)

WebmasterWorld Administrator rogerd is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I've got a list of items separated by <br> tags. Normally they display like this (<br> tags don't actually show, of course):

-----------
List item 1<br>
List item 2<br>
List item 3<br>
-----------

But if I've got long items, the display comes out more like this:

-----------
Fairly long
List item 1<br>
Fairly long
List item 2<br>
Fairly long
List item 2<br>
-----------

I'd like to add a little space between the items so it looks more like:

-----------
Fairly long
List item 1

Fairly long
List item 2

Fairly long
List item 3
-----------

This list is software generated. I can hack the code to turn the <br> tags into <p> tags or add another <br> to get the spacing, but is there a way to do this with CSS? I'd prefer just to edit the style sheet so that future code upgrades are easy to implement.

I think the issue is that the entire list is in a <div>, e.g.,

<div class="list">
List item 1<br>
List item 2<br>
List item 3<br>
</div>

So, without adding classes to each line, can I increase the spacing?

9:42 pm on Jul 20, 2004 (gmt 0)

10+ Year Member




br
{
line-height:XXpx;
}

or, if you want to only affect those br's contained by that div,


.list br
{
line-height:XXpx;
}
10:48 pm on Jul 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<ul class="unstyled extra-space">
<li>Item 1
<li>Item 2
<li>Item 3
</ul>

ul.unstyled { display: block }
ul.extra-space li { margin: .5em 0 }

11:26 pm on Jul 20, 2004 (gmt 0)

10+ Year Member



Why not use lists?

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Then set the line-height on the list items and add any other styling you want.

DrBrain, <ul> are block level elements so you don't need to set them to display:block;

2:58 am on Jul 21, 2004 (gmt 0)

10+ Year Member



Well, it seems he didn't want to mess with the server-side code...
2:46 pm on Jul 21, 2004 (gmt 0)

WebmasterWorld Administrator rogerd is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I like your solution, SethCall, as it addresses the issue precisely (only modifying the stylesheet). Elegant. Oddly, however, it isn't working as expected and it will probably be easiest just change the code.:( Thanks, all.
3:11 pm on Jul 21, 2004 (gmt 0)

10+ Year Member



its not workin? :/ ummm,
I definitely tested it.

Strange

3:16 pm on Jul 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Reflection: oh yes, I meant list-style: none; instead.
7:07 pm on Jul 21, 2004 (gmt 0)

10+ Year Member



I can hack the code to turn the <br> tags into <p> tags or add another <br> to get the spacing, but is there a way to do this with CSS?
If you're already willing to hack the code, why not hack it a little more to generate the semanticly correct HTML: a ul with li's? That would seem to be the best solution.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month