Freepages-Help-L Archives

Archiver > Freepages-Help > 2010-09 > 1285552470

From: "Barry Carlson" <>
Subject: Re: [FreeHelp] Scrolling Table
Date: Mon, 27 Sep 2010 14:54:30 +1300
References: <><6F560DF74F0A491AB85E58C614C381AC@BERT><BLU0-SMTP99A9B4FBAF66832E53F19ED37E0@phx.gbl><E7C31E1DAC89421C83D8C56AAFD6ED0A@BERT><BLU0-SMTP8795A6E79F3B8F9503BDDFD3630@phx.gbl><58860025FAE444128B7552B5BFD77373@BERT><BLU0-SMTP681E5FAC269A99A80C88EED3640@phx.gbl><C6094BCDFECC4B2CA8CCF0386E2BFACA@BERT><BLU0-SMTP6559CFF3CF56ADB0201A9D3640@phx.gbl><540DF6F0442B4852871B6483740631AD@BERT><BLU0-SMTP4701821693AB32FE9E3C9ED3650@phx.gbl>

An explantion of the html and why it is there follows:-

Each item is part of an "unordered list", and as a result, the link <a
href="">visible reference</a> appear within the <li></li> tags. An unordered
list has the following format:-
<li>data 1</li>
<li>data 2</li>
<li>data 3</li>
Paste the above list into a html page and it will appear on 3 rows and
prefixed with a "bullet" symbol.

In our situation, we want the data to be presented in order, but in 2
columns. To achieve that, CSS is used to -

(a) Format the width of <ul>, float the contents to the left, and remove the
vertical listing and bullets by using list-style:none.

(b) Likewise, <li> is made half the width of <ul>, floated to left, which
allows data to appear in the -

Aa Ab
Ac Ad format, and the associated styles are:-

ul {
float: left;
width: 950px;
margin: 0;
padding: 0;
list-style: none;

li {
float: left;
width: 475px;
margin: 0;
padding: 0;

Dealing now with:-
<li><a name="number" id="number">#</a></li>
The original code had <a name="#" id="#">, and was changed to allow
validation. It is only possible to start a "name", "class" or "id"
identifier with an Alpha letter. So, if you go up to the line of anchor
selectors, you will now find that -

<a href="##">#</a>

has been changed to <a href="#number" id="number">.


<li><a href=""># a</a></li>
Has been included (note it is red in the spreadsheet) to force all versions
of Internet Explorer to display the first data value in the left column
under its heading. It sits in the right-hand column, but isn't visible -
"visibility:hidden". All other browsers on the planet allow the use of the
CSS property "clear:all" applied to the preceding <li> item to perform the
same function.

<li><a href="">3COM</a></li>;
<li><a href="">3M</a></li>;
<li><a href="">3M-Adhesive Division


</ul><span></span><hr /><ul><li><a name="A" id="A">A</a></li>
<li><a href="">A a</a></li>

The same issues apply to the above code, but you will notice that -

</ul><span></span><hr /><ul>
have been added as it is not possible to insert a horizontal rule <hr />
into a list without closing it. The <span></span> tags have also been
included and are to provide some space between the horizontal rule and the
bottom of the proceeding section. CSS provides the means of adjusting that
space height if required.

Finally, the insertion point for the table data is clearly marked in the
html, and the styling of for example:-
<li><a name="number" id="number">#</a></li>
<li><a href="">A a</a></li>
... is achieved by using pseudo :nth-child selectors in the CSS. Once again
provision has been made for the W3C compliant browsers using:-

<!--[if gte ie 9]><!-->
<style type="text/css">
ul:nth-child(n+1) li:nth-child(1) {font-size:34px;font-weight:bold;}
ul:nth-child(n+1) li:nth-child(2)

and a javascript version for the other lot.

<!--[if lt ie 9]>
<script type="text/javascript" src="jquery.first-last-child.js"></script>
<script type="text/javascript">
/* For IE8 and earlier Internet Explorer */
$(document).ready(function() {

The javascript file required to implement the above can be downloaded at:-

I hope the above explains most of what is happening, and anything I post on
FreeHelp is free to use, and if it wasn't, it would still get used anyway!


This thread: