homepage Welcome to WebmasterWorld Guest from 54.242.241.20
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Increasing space between BR list items
rogerd

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



 
Msg#: 4155 posted 9:36 pm on Jul 20, 2004 (gmt 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?

 

SethCall

10+ Year Member



 
Msg#: 4155 posted 9:42 pm on Jul 20, 2004 (gmt 0)


br
{
line-height:XXpx;
}

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


.list br
{
line-height:XXpx;
}

drbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4155 posted 10:48 pm on Jul 20, 2004 (gmt 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 }

Reflection

10+ Year Member



 
Msg#: 4155 posted 11:26 pm on Jul 20, 2004 (gmt 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;

SethCall

10+ Year Member



 
Msg#: 4155 posted 2:58 am on Jul 21, 2004 (gmt 0)

Well, it seems he didn't want to mess with the server-side code...

rogerd

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



 
Msg#: 4155 posted 2:46 pm on Jul 21, 2004 (gmt 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.

SethCall

10+ Year Member



 
Msg#: 4155 posted 3:11 pm on Jul 21, 2004 (gmt 0)

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

Strange

drbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4155 posted 3:16 pm on Jul 21, 2004 (gmt 0)

Reflection: oh yes, I meant list-style: none; instead.

mep00

10+ Year Member



 
Msg#: 4155 posted 7:07 pm on Jul 21, 2004 (gmt 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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved