[WSG] Semantically creating 'pipes' for footer links

[Richard Czeiger]

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&nbsp;with&nbsp;NoBrokenSpaces</a></li>
    <li><a href="" title="Link 5" accesskey="5">link</a></li>
  </ul>
  <ul id="validationLinks">
    <li><a href="" rel="external" title="Check XHTML">xhtml</a></li>
    <li><a href="" rel="external" title="Check CSS">css</a></li>
    <li><a href="" 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>