W3C Validation: Ordered List element inside Label

StackOverflow https://stackoverflow.com/questions/4286674

Question

Given the fact that <label> and <span> are inline elements and <ol> is a block element, what is the proper way to nest an <ol> inside a span/label w/o using a script?

input { vertical-align: top; }
label { display: block; }
label + label { margin-top: 1em; }
ol { padding:0; margin:0; }
<label for="foo">
   <input id="foo" type="checkbox" />
   <span style="padding-left: 1em; display:inline-block;">
      <ol>
         <li>Boat</li>
         <li>Jet</li>
         <li>Chopper</li>
      </ol>
   </span>
</label>

<label for="bar">
   <input id="bar" type="checkbox" />
   <span style="padding-left: 1em; display:inline-block;">
      <ol>
         <li>Car</li>
         <li>Auto</li>
      </ol>
   </span>
</label>

The goal is to have an automated ordered list, which is not dependent on JavaScript, which is also considered W3C XHTML valid.

Was it helpful?

Solution

You could use an imagemap (map) to contain your list, but that may be abusing the map tag.

What I'm saying is something like the following:

<label for="foo" style="padding:1em;display:inline-block;">
  <map id="foolist">
       <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
       </ol>
  </map>
</label>
<input name="foo" id="foo" type="checkbox" />

EDIT: W3C states that the map attribute is block level:

The MAP element content model allows authors to combine the following:

  1. One or more AREA elements. These elements have no content but specify the geometric regions of the image map and the link associated with each region. Note that user agents do not generally render AREA elements. Therefore, authors must provide alternate text for each AREA with the alt attribute (see below for information on how to specify alternate text).
  2. Block-level content. This content should include A elements that specify the geometric regions of the image map and the link associated with each region. Note that the user agent should render block-level content of a MAP element. Authors should use this method to create more accessible documents.

OTHER TIPS

Since no one is answering I'll take a stab:

Manually create the list, using spans

   <label for="foo">
      <span style="padding:1em;display:inline-block;">
         <span class="ol">
            <br /><span class="li">1. 1</span>
            <br /><span class="li">2. 2</span>
            <br /><span class="li">3. 3</span>
         </span>
      </span>
   </label>

Every place you see an ol{...} or li{...} in the CSS, you'll have to insert the class; ol,.ol{...} and li,.li{...}. Additionally, .ol would probably need to have display:block;

The line breaks could probably be replaced by a clear, but this is all off the top of my head, w/o testing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>foo</title>

<style type="text/css">
/*<![CDATA[*/
 span.c1 {padding:1em;display:inline-block;}
/*]]>*/
</style>
</head>
<body>
<ol>
<li><label for="foo"><span class="c1">1</span></label></li>
<li><label for="foo"><span class="c1">2</span></label></li>
<li><label for="foo"><span class="c1">3</span></label></li>
</ol>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top