Adjust line-height of element within a parent div

[gldweb]

I am trying to adjust the line height of an element that resides within a div container. The div container sets the overall line height of the child elements beneath it.

Certain items within the div container need to be wrapped to a second line and indented - done by using "<br /><span class="nav_indent">". The problem is I want the these items to have a line height less than what is established in the div container and present these two lines as belonging together.

I realize this is an inheritance thing, but how can I get this done the way I want?

Here is the HTML:

<div id="navcontainer">
<div id="navlist">
<ul>
<li>Home</li>
<li>Photographer's<br /><span class="nav_indent">Biography</span></li>
<li>Wedding Moments</li>
<li>Welcome to the<br /><span class="nav_indent">Gallery</span></li>
<li>Familiy Portraits and<br /><span class="nav_indent">Headshots</span></li>
<li>Concert and<br /><span class="nav_indent">Sporting Events</span></li>
<li>Architectural</li>
<li>Contact Us</li>
</ul>
</div>
</div>

Here is some of the CSS for the above that applies to my issue:

#navcontainer {
float: left;
display: inline;
width: 150px;
margin: 0 0 0 10px;
padding: 0;
}
#navcontainer ul {
margin: 0; /*removes indent IE & Opera*/
padding: 0; /*removes indent MOzilla & NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 2em;
}
.nav_indent {
margin-left: 1em;
line-height: 1em;
}

Would appreciate any input and suggestions.

Thanks

[createErrorMsg]

The line-height on the ul serves to space the LI line-boxes apart by 2ems, but you might consider using a different approach to space out the LIs, which would free-up the line-height property to properly space the line boxes within each list item.

Try changing the overall line-height to the desired size for the double-lined list item text, then apply a bottom margin to the LIs to space them out. Something like this...

ul {line-height:1.0em;}
li {margin-bottom: 1.0em;}

...ought to do it.

cEM

[gldweb]

That did it! Thanks