Fri, 2010-03-12 19:00
I'm taking my first stab at using an unordered list to display a simple table, and I'm having issues getting a similar display across IE7 and FF/Chrome. My understanding is that this is due to how IE incorrectly expands containers to surround floated elements.
Initially I had something like this, where the right column had the text aligned to the right:
<div id="mainDiv" runat="server"> <h3> Header</h3> <table> <tr> <th> Label 1 </th> <td> Value 1 </td> </tr> <tr> <th> Label 2 </th> <td> Value 2 </td> </tr> </table>
I then converted it over to something like this:
<div id="mainDiv" runat="server"> <ul class="table"> <li class="header"> Header </li> <li> <span class="left">Label 1</span> <span class="right">Value 1</span> </li> <li> <span class="left">Label 2</span> <span class="right">Value 2</span> </li> </ul> </div>
My new CSS looks like the following:
ul.table li { clear: both; background: white; border-left: 1px solid #d4d0c8; border-right: 1px solid #d4d0c8; border-bottom: 1px solid #d4d0c8; padding: 1px 3px 1px 3px; } ul.table li.header { background: #4B721D; color: #FFFFFF; font-size: 16px; font-weight: bold; border: none; padding: 5px 0px 5px 3px; } .table .left { float: left; } .table .right { float: right; font-weight: bold; }
This achieves the side by side look that I'm looking for, however the LI does not expand to contain the two spans (except in IE). I have a background style that I want to apply to the entire LI, however it's just showing up as a tiny sliver above the two spans, instead of filling in behind them. I've tried adding a span that clears both as the last element in the LI, which works in FF/Chrome, but adds an additional line in IE. I've tried floating the LI, which expands the LI like I want, but I lose the two column look.
Is there an easier way to achieve this? Here is an example of what I'm trying design (I know, looks simple right?). 
Thanks for any help.
Fri, 2010-03-12 19:56
#1
Hold your horses. If this
Hold your horses. If this data is tabular, then a table is the best thing to use. In other words, is the data something someone would put into Excel? If the answer is yes, then use tables.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-03-12 20:14
#2
That was my original thought,
That was my original thought, but I've been told that I'll get quite a bit more flexibility if I can use an unordered list. The data could be copied into Excel, although you're not really getting anything out of it. The first column is basically a label for the value in the second column. The values in the second column are different types, some are numbers, some are dates, some are strings.
Fri, 2010-03-12 20:59
#3
twb838 wrote: ...but I've
...but I've been told that I'll get quite a bit more flexibility if I can use an unordered list.
NOT true. Tables are to be used for tabular data, thats what they are for, nothing else. Whoever told you to use a list for tabular data, doesnt know what they are talking about. Walk up to this person, and slap them in the face for feeding you bad information. Using tables, for tabular data, keeps the html semantically correct while the list would not.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-03-12 22:47
#4
except this is a single
except this is a single column (of data) table. A list might also be acceptable to mark this up. I would consider a definition list, with the labels in dt and data in dd. Of course, if there is any more data than this, then CTJ is right - use a table.
to address your original question: there are other ways to contain floats other than a clearing div or floating parent. try setting overflow:hidden on the li