List Item with spacing

[jcallas]

I do not think that what I am trying to do is that difficult but as always I cannot seem to get it to work correctly in IE 6.

I have a collection of search results that I want to display as an unordered list. What I am looking to do differently is that the results have several columns of information and I wish to do is simulate columns for different parts of the row line up. (Basically a grid...with bullets at the front.)

If I understand the current state of CSS display support correctly, if I was only targeting Firefox I could utilize the table, table-row, table-cell, etc. values. But since I also have to target IE 6 (and soon IE 7) (internal only website with a almost all IE 6 base), I am stuck using floats.

My solution was to have each row as a <li> element and then put each "column" in a <span> element with an explicit width. Correct me if I am wrong but the only way to set an explicit width on an inline element is to float it?

Since all the <li> seem empty (because of all the floating), the border around the list cut through the contents. To fix that I set overflow: auto and everything looks good in Firefox.

So my code so far looks like

<style type="text/css">
 
ul {
   overflow: auto;
   border: 1px solid #000000;
}
 
li {
   clear: both;
}
 
li span {
   float: left;
}
 
</style>
 
<ul>
   <li><span style="width: 4em;">abcd</span><span style="width: 6em;">1234</span><span style="width: 5em;">$12.23</span></li>
   <li><span style="width: 4em;">abcd</span><span style="width: 6em;">1234</span><span style="width: 5em;">$12.23</span></li>
   <li><span style="width: 4em;">abcd</span><span style="width: 6em;">1234</span><span style="width: 5em;">$12.23</span></li>
</ul>

Of course something this simple does not work in IE...the bullet displays at the end of the list. (Not really the end...if you add more spans to add content, the bullet gets rendered right on top of the text...)

So I thought I would fix it by float the <li> element also. (Still looked the same in Firefox.) So now the bullets are not in the middle of the line...but instead are not rendered at all!

So then I started looking at the solution at http://www.tjkdesign.com/articles/fl...ss_layouts.asp. The idea of not using floats really interested me. And it kinda makes sense...each <li> of the parent is a row and each child <li> in a row represents the column. But the article as written seems a bit too complex to follow. Was having trouble extracting how to get <li> elements to display horizontally.

Any ideas?

Thanks,
Jason

[adwatson]

I'd say just use a table - sounds like you're really trying to present tabular info, which is exactly what tables are for...

[jcallas]

Ummm... Thought about that but I am not convinced it is really tabular. Just looking for uniform spacing to make the search results easier to read. The entire line will be a link to view details.

I did figure out the solution as posted on the website. Actually pretty easy once you figure out the different slightly different markup used for standard browsers versus IE. Of course I am not sure if semantically the results should be represented by a list nested in a list. (This definitely makes you look at the results as tabular data since you are in essence defining "rows" and "columns".)

What is the currently recommended why to simulate columns? Still floats? Is this because IE does not support display values of table, table-row, and table cell? Would all the css page layout articles be scrapped if it did?

- Jason

[Erik J]

I agree with adwatson, this seems to be tabular data.

..the bullet displays at the end of the list. (Not really the end...if you add more spans to add content, the bullet gets rendered right on top of the text...)

So I thought I would fix it by float the <li> element also. (Still looked the same in Firefox.) So now the bullets are not in the middle of the line...but instead are not rendered at all!...

The bullets, I think is added by the browser as static content in an anonymous box that depending of list-type can slip under floats inside item or make the floats go below. If the item is floated the bullet slip under the item itself.

A way to get control when items or its content are floated is to use a background on the items as bullet.

And if you want a list to display as a table, maybe something like this would work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
 
ul {
	margin-top: 1px;
}
li {
	clear: left;
	float: left;
	border: 1px solid #000;
	padding-left: 3em;
	margin-top: -1px;
	width: 21.5em;
	background: url(bullet.gif) 1em 50% no-repeat;
	line-height: 2em;
	text-align: left;
	list-style: none;
}
li span {
	float: left;
	border-left: 1px solid #000;
	padding-left: 1em;
	width: 6em;
}
</style>
</head>
<body>
	<ul>
		<li><span>abcd</span><span>1234</span><span>$12.23</span></li>
		<li><span>abcd</span><span>1234</span><span>$12.23</span></li>
		<li><span>abcd</span><span>1234</span><span>$12.23</span></li>
	</ul>
</body>
</html>

[Dan Schulz]

I'd go with the table as well. You have rows and columns of data that are presented a certain way and must retain their relationships with each other when CSS is turned off or disabled - which is exactly what the table was meant for.

[jcallas]

Since each result needs to be rendered as a link, is it considered proper to enclose the entire row within an anchor tag? I always thought of the anchor just being part of the cell content.

<table>
   <a href="goSomewhere.aspx?id=1">
      <tr>
         <td>abcd</td>
         <td>abcd</td>
         <td>abcd</td>
      </tr>
   </a>
   <a href="goSomewhere.aspx?id=2">
      <tr>
         <td>abcd</td>
         <td>abcd</td>
         <td>abcd</td>
      </tr>
   </a>
</table>

I guess it is easy to pick tabular when you want to treat the data as tabular (sorting, filter, color/display formatting, etc)...guess I am having a hard time seeing it with this one since all I am seeing is "the result with some spacing for easier reading"...in other words, I though

* ABCD 763546 01/01/2008 $12.32
* XYZ BF-23 01/02/2008 $165.32
* MNOP 87653421 01/02/2008 $34.00

was easier to look at instead of

* ABCD - 763546 - 01/01/2008 - $12.32
* XYZ - BF-23 - 01/02/2008 - $165.32
* MNOP - 87653421 - 01/02/2008 - $34.00

Will convert it to a table with the first column having a background image to simulate the bullets. (I guess the link cannot go around the entire row since I do not want the bullet to be part of the link...)

Any thoughts to my question of floating still being the current way of positioning stuff?

Thanks.

[Dan Schulz]

No, because tables cannot contain links as direct descsendants, and anchors (being inline elements) cannot accept block level elements. Remove the anchors from their current positions and the table will be valid.

[Erik J]

Maybe position an anchor in cell all over the row to the right of bullet cell? I made a test to simulate the list posted before:

<!DOCTYPE HTML PUBtrC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
 
table {
	table-layout: auto;
	border-collapse: collapse;
	font-size: medium;
	position: relative;
}
td {
	border: 1px solid gray;
	padding: 0 1em;
	width: 6em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
}
td.link {
	border: 0;
	width: 1px;
	background: url(bullet.gif) no-repeat center center;
}
td.link a {
	position: absolute;
	z-index: 1;
	top: auto;
	left: 2em;
	margin-top: -1em;
	background: url(bullet.gif) no-repeat -100px; /* to trick IE to activate whole area */
	width: 18em;
	height: 2em;
	text-decoration: none;
}
</style>
</head>
<body>
	<table>
		<tr><td class="link"><a href="#nogo"></a></td><td>abcd</td><td>1234</td><td>$12.23</td></tr>
		<tr><td class="link"><a href="#nogo"></a></td><td>abcd</td><td>1234</td><td>$12.23</td></tr>
		<tr><td class="link"><a href="#nogo"></a></td><td>abcd</td><td>1234</td><td>$12.23</td></tr>
	</table>
</body>
</html>

[jcallas]

Exactly what I thought Dan. Was just checking.

So...I should use table because I am presenting "tabular" data...but I cannot use tables because I need the entire "row" to be a link. What fun!

I ended up using a list of lists...In this case it just made more sense. Too bad I cannot just set explicit widths on inline elements without resorting to float.

Thanks for the help.