[RESOLVED] stop top/bottom padding on <ul> windows..

[LouPhi]

I want to make a change to my CSS on a <ul> style so that if/when the text within the <li> wraps to the next line, the words which wrap fit tightly to the words above, rather than making the wrapped words look like a completely new <li> in the <ul>

See http://www.equinox-group.co.uk/dev/casestudies/charity-dna.php

In this example, 'National Waterfront Museum' on the left hand navigation area is one item, but the word 'Museum' wraps onto a new line and there is a huge gap between the first words...

The css for this style is:

ul.submen {
text-decoration: none !important;
text-transform: uppercase;
margin-left: 0.05em;
list-style-type: none;
color: #003399;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 2.15em;
}

I'm guessing its the "line-height: 2.15em'" which is causing the problem, but I need a gap between each line - and if I use 'padding: top' and 'padding: bottom' instead this just makes a gap above and below the entire <ul> rather than each <li>

Any ideas??
LP

[WebJoel]

ul.submen li {line-height:0.9em;} Will cause the un-closed but line-wrapped "li" to have a vertically-short line-height. Use margin in "li" to space the actual 'new' "li"s instead of "line-height". You want to vertically seperate the "list items", not the "contents of the list items" of which, "line-height" would be applied.
This or some variation would work.

[Fang]

ul.submen {
text-decoration: none !important;
text-transform: uppercase;
margin-left: 0.05em;
list-style-type: none;
color: #003399;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}
ul.submen li {
padding-bottom:1em;
}

[LouPhi]

Thanks WebJoel.. thats perfick!!

And thanks Fang - I didn't see your post until I came back on to reply to WebJoel, but it also does the trick.

I love this site!!

LouPhi :)

[WebJoel]

Kewl :)

And yes, here at WD you'll have people trippin' over each other to give good answers. :D