whitespace: nowrap;
On whatever element is giving you trouble.
Cheers,
Kevin Futter
On 5/10/04 11:28 AM, "Richard Czeiger" <[EMAIL PROTECTED]> wrote:
Hi guys,
I'm putting together a semantically correct UL of links for my footer.
I'd like to have them separated by 'pipes' as this is a common and easily recognised technique.
But the pipes themselves are irrelevant (semantically). So here's what I've come up with...
ALSO! My one thing is that if the text inside the links is made up of two or more words, then they get pushed to separate lines. Is there a way to avoid this without specifying a width or without putting a 'no broken spaces' between the words?
Can you suggest anything better?
<style type="text/css">
#footer {
text-align: center;
}
#footer ul li {
display: inline; width: 1px;
margin: auto 5px; padding-left: 10px; border-left: 1px solid #000000;
line-height: 120%;
}
#footer ul li:first-child { border-left: none; }
/* Not rendered by a few agents, so we'll use the 'footerBorderKill' _javascript_ function switches off the first child's left border */
</style>
<div id="footer">
<ul id ="contentLinks">
<li><a href="" title="Link 1" accesskey="1">link</a></li>
<li><a href="" title="Link 2" accesskey="2">link with multiple words</a></li>
<li><a href="" title="Link 3" accesskey="3">link</a></li>
<li><a href="" title="Link 4" accesskey="4">link with NoBrokenSpaces</a></li>
<li><a href="" title="Link 5" accesskey="5">link</a></li>
</ul>
<ul id="validationLinks">
<li><a href="" href="http://validator.w3.org/check/referer">http://validator.w3.org/check/referer" rel="external" title="Check XHTML">xhtml</a></li>
<li><a href="" href="http://jigsaw.w3.org/css-validator/check/referer">http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Check CSS">css</a></li>
<li><a href="" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">http://creativecommons.org/licenses/by-nc-sa/2.0/" rel="external" title="View license">cc</a></li>
</ul>
</div>
<script type="text/_javascript_">//<![CDATA[
// Kills the Left Border on the Footer Navigation
function footerBorderKill() {
myBody=document.getElementById('footer');
myBodyElements=myBody.getElementsByTagName("ul"); // Gets all the UL elements that are children of 'footer'
for( var i = 0; i < myBodyElements.length; i++ ) {
myList=myBodyElements.item(i); // Loops through all the ULs in the footer
myListElements=myList.getElementsByTagName("li"); // Gets all the LI elements that are children of the ULs
myLI=myListElements.item(0); // Gets the first item of the list of LI elements
myLI.style.borderLeft = 'none'; // And sets its border to nothing
}
}
window.> //]]></script>