Welcome to WebmasterWorld Guest from 184.73.66.157

Forum Moderators: not2easy

Message Too Old, No Replies

Increasing space between BR list items

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

Administrator

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

joined:Aug 2, 2000
posts:9687
votes: 0


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 July 20, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0



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 July 20, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


<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 July 20, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 16, 2003
posts:592
votes: 0


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 July 21, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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

Administrator

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

joined:Aug 2, 2000
posts:9687
votes: 0


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 July 21, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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

Strange

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


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

Full Member

10+ Year Member

joined:Dec 25, 2003
posts:269
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members