12

I have inherited a web forms report laid out using pure HTML and ASP.NET server controls, and a common layout pattern is a section laid out using a four column table, with first and third columns used for field labels, and the second and fourth columns for values.

As I've been tasked with 're-skinning' the report I thought I'd try and improve the semantics of the markup and remove all tables not used for actual tabular data. After some experiments with definition lists for name-value pairs, I settled instead on an ol/li combination, but I can't figure out how to get both text elements inside each li to occupy 50% of the width of the whole li element.

This is css for the list:

ol.name-value
{
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

This is the HTML:

<div class="span-12">
    <ol class="name-value" style="width: 100%;">
        <li>                    
            <label for="about">Client</label>
            <span id="about">Apartment Applied Visual Arts</span>
        </li>
        <li>
            <label for="about">Report Date</label>
            <span id="Span1">2011/08/08 16:50:10</span>
        </li>
        <li>
            <label for="about">Report No.</label>
            <span id="Span2">33251</span>
        </li>
    </ol>
</div>

And this is what I get as result. The Report Details section is a two-column table, where the Report Details is the above ordered list. I am trying to get the list

Illustration of styling that isn't working.

ProfK
  • 49,207
  • 121
  • 399
  • 775
  • Have you attempted styling the labels and spans? – diggersworld Aug 08 '11 at 16:42
  • 3
    I don't think that's an appropriate use of ` – BoltClock Aug 08 '11 at 17:07
  • 1
    @BoltClock, I rather think the innapropriate element here is the span. The label brings semantics to the party, telling screen readers "this is the description of the following text", or something like that. It did cross my mind to use 'input' tags styled as readonly, but I was in a hurry. – ProfK Aug 08 '11 at 17:17
  • @BoltClock, it isn't a form, it's a "web forms report laid out using pure HTML and ASP.NET server controls". I know the label/input pairing is more forms centric, but that's why I'm trying to develop a label/value pairing. I have asked another question dealing just with this at http://stackoverflow.com/questions/6991685/what-is-an-appropriate-html-pattern-for-displaying-name-value-pairs – ProfK Aug 09 '11 at 05:21

1 Answers1

7

Try this:

ol.name-value {
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

ol.name-value li label {
    display: table-cell;
    width: 50%; 
}

ol.name-value li span {
    display: table-cell;
    width: 50%; 
}
ProfK
  • 49,207
  • 121
  • 399
  • 775
Rost
  • 3,602
  • 2
  • 21
  • 21