Controlling Spacing Between Two Lines When Using <br />

[Memphis Steve]

Is is possible to control spacing between two lines when using <br />? I would like to be able to adjust the spacing between the two lines in each link below so that the two lines sit snugly on top of each other within each anchor without a lot of extra space between each line.

I am self taught in XHTML and CSS and would appreciate any suggestions?

THE XHTML:

<ul id="ns-buttons-links">
<li id="nsbl-request"><a href="#"><span class="nsbl-1st-line">REQUEST</span><br /><span class="nsbl-2nd-line">AN INVESTIGATION</span></a></li>
<li id="nsbl-submit"><a href="#"><span class="nsbl-1st-line">SUBMIT</span><br /><span class="nsbl-2nd-line">YOUR EVIDENCE</span></a></li>
<li id="nsbl-reserve"><a href="#"><span class="nsbl-1st-line">RESERVE</span><br /><span class="nsbl-2nd-line">A HAUNTED ROOM</span></a></li>
<li id="nsbl-email"><a href="#"><span class="nsbl-1st-line">EMAIL</span><br /><span class="nsbl-2nd-line">YOUR COMMENTS</span></a></li>
</ul>

THE CSS:

#nav-sub li#nsbl-request a, #nav-sub li#nsbl-submit a, #nav-sub li#nsbl-reserve a, #nav-sub li#nsbl-email a {
display: block;
width: 130px;
height: 46px;
text-align: center;
text-decoration: none;
padding-top: 3px;
}

#nav-sub ul#ns-buttons-links a .nsbl-1st-line {
font: 110% Georgia, serif;
color: #e8e8e6;
letter-spacing: .1em;
padding-top: 3px;
}

#nav-sub ul#ns-buttons-links a .nsbl-2nd-line {
font: 62% "Lucida Grande", Tahoma, sans-serif;
color: #e8e8e6;
letter-spacing: .1em;
}

#nav-sub ul#ns-buttons-links a:hover .nsbl-1st-line, #nav-sub ul#ns-buttons-links a:hover .nsbl-2nd-line {
color: #293357;
}

For a look at the entire page I'm working on, please go here:

www.williamscreative.com/mmsgh/index.html

I'm also having trouble with the layout breaking in IE 6 and IE 5.5. Everything looks good in the rest of the browsers out there.

Thanks for any help.

[drhowarddrfine]

Just use line-height:0 on nlb-request.
<br/> is not styleable. It only causes the break but the line itself is what causes the sizing.

[Taftheman]

use a css stylesheet, to creat a style. you can use a div instaed of a break, and then just add padding to the bottom of how much you want or visa versa

[Memphis Steve]

Cool! The line height suggestion fixed the spacing problem in the navigation button. Thanks!

Any suggestions on how to remedy the the broken layout in IE 5.5 and IE 6? Have I used floats incorrectly or set a margin wrong?

www.williamscreative.com/mmsgh/index.html

[drhowarddrfine]

you can use a div instaed of a break, and then just add padding to the bottom of how much you want or visa versa

Absolutely not! This would be equivalent to the old 'spacer.gif' used in table layout. But that's what margins and padding are for. Plus, using a div for spacing is semantically incorrect.

Taftheman,
For the drop down, check your widths. IE tends to add margins/padding/other stuff where there is none. If your divs add up to the total width of the content area, widen it up a few px and see if that makes that third column jump up.

For the images, if you are using transparency on the png's, IE6 does not work with that.

[Memphis Steve]

Thanks Doc. Will try your suggestion this evening after work.