DIVs break OL sequence IE

HTML & CSS
1

Breaks in ALL versions of IE, but works in Chrome and Mozi.
If I place the <OL> into two divs to make two columns, the numbering sequence of the Ordered List breaks. How do I float them into 2 columns?

Putting an <OL> into 2 colunms using float right and left (not using
css3 columns) breaks the numbering sequence of the <OL> .

e.g.,
column #1 reads: 1, 2, 3,
column #1 reads: 1, 2

If I take the divs out, the sequence returns to normal:

e.g.,
column #1 reads: 1, 2, 3,
column #1 reads: 4, 5


See code below:


<!DOCTYPE html>
<html>
<head>
       <title>test</title>
               <style type="text/css">
                       ol{list-style-type: default; margin:0; padding:0; background-color:yellow; font-weight:bold; font-size: 125%;}
                       ul{margin:0;padding:0;border:1px solid red; background-color:pink;}
                       ul li{list-style-type: none; margin:0; padding:0; font-weight:normal; font-size:80% !important; line-height: 21px;}
               </style>
</head>
<body>
                       <div style="position:relative; width:720px; margin-right:auto;margin-left:auto;">
                                       <ol>
                                               <div style="float:left; padding-left:40px; width:310px;">
                                               <li>
                                                       Lorem ipsum dolor
                                                               <ul>
                                                                       <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               </div>

                                               <div style="float:right; padding-right: 50px; width:310px;">
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               </div>
                                       </ol>
                               <p class="clear" />
                       </div>
</body>
</html>
2

<ol start=“4”>

This was deprecated in HTML 4.01 Strict, but is back in the specs in HTML 5.

3

Hi,

You can’t break up a list structure like that with divs as that is not allowed. Nothing can come between the ol or ul except a list pair. All content must be within the opening and closing list tags (even nested lists).

I don’t see that your inner content should be an unordered list either and it looks more like a heading and content (or maybe a nested dl).

I’d do something like this:


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
h3 {
    margin:0;
}
ol {
    margin:0;
    padding:0 0 0 16px;
    font-weight:bold;
    font-size: 125%;
}
ul {
    margin:0 auto;
    padding:0;
    list-style:none;
    position:relative;
    width:720px;
}
p {
    margin:0;
    padding:0;
    font-weight:normal;
    font-size:80%;
    line-height: 21px;
    background-color:pink;
    border:1px solid red;
}
.col1 {
    float:left;
    padding-left:40px;
    width:310px;
}
.col2 {
    float:right;
    padding-left: 50px;
    width:310px;
}
</style>
</head>
<body>
<ul>
    <li class="col1">
        <ol>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
        </ol>
    </li>
    <li class="col2">
        <ol start="4">
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
        </ol>
    </li>
</ul>
</body>
</html>

That uses the method that Stevie mentioned as I don’t see any other way to do it for older browsers (you could use counters etc for newer browsers).

4

I’ve noticed that Jakob Nielsen’s page uses the deprecated “start” attribute, and it works in more browsers than the counters().

5

The start attribute is one of those features that should never have been deprecated in the first place. Counters are too poorly supported to be relied on, and too complicated for simple deployment. <ol start=“x”> is simple, straightforward and more-or-less fully supported.

6

Also start is actually more semantic if you think about it, the numbers of an OL are as much content as anything else…

Though yeah, that’s laughable – you can’t put div in a OL that way… the only elements that can be direct children on a OL or UL are LI.

Though you see people trying to do that sort of nonsense all the time.

7

Nice!

What kind of counters? Javascript?

8

Or build them in the markup if the content is generated server side.

Sometimes making them in the content is a better choice for some visual stylings as you can better control their appearance in CSS than you can the normal elements for list-items. The problem being that CSS on if you use OL you’ll get two sets of numbers.

– edit – scratch the rest of that.

9

Oh, there is one other way this could be done, but I hesitate to mention it due to it’s complexity.


<ul>
	<li>Data</li>
	<li>Data</li>
	<li>Data</li>
	<li>Data</li>
	<li class="secondColumn">Data</li>
	<li class="secondColumn">Data</li>
	<li class="secondColumn">Data</li>
</ul>



ul {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	position:relative; /* make sure the ul reports it's width to child elements in all browsers */
}

li {
	width:50%;
	margin-right:2em; /* force them onto new lines */
	float:left;
}

li.secondColumn {
	float:right;
	margin-left:-3em; /* makes them fit, and the extra 1em prevents perfect width drop */
}

Not the greatest way of doing it, but it works in most browsers. (NOT extensively tested).

Or not… huh, could have sworn that used to work. Oh, last time I tried that stunt the only browser we cared about was IE6… My bad, only works on quirks.

10

We had a quiz a while ago that showed a way to do this but is too complex also for normal use but is interesting all the same.

What kind of counters? Javascript?

No CSS counters.

It would work like this but still would not be automatic as you have to set the item-start in css.


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
h3 {
    margin:0;
}
ol {
    margin:0;
    padding:0 0 0 16px;
    font-weight:bold;
    font-size: 125%;
}
ul {
    margin:0 auto;
    padding:0;
    list-style:none;
    position:relative;
    width:720px;
}
p {
    margin:0;
    padding:0;
    font-weight:normal;
    font-size:80%;
    line-height: 21px;
    background-color:pink;
    border:1px solid red;
}
.col1 {
    float:left;
    padding-left:40px;
    width:310px;
}
.col2 {
    float:right;
    padding-left: 50px;
    width:310px;
}


[B].col1 ol { counter-reset: item }
.col2 ol { counter-reset: item 3 }
ol li { display: block }
ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    float:left;
    margin-left:-1em;
}[/B]

</style>
</head>
<body>
<ul>
    <li class="col1">
        <ol>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
        </ol>
    </li>
    <li class="col2">
        <ol>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
            <li>
                <h3>Lorem ipsum dolor</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
            </li>
        </ol>
    </li>
</ul>
</body>
</html>

Should work in IE8+

11

Have tried this nonsense myself shame ducks head. For some reason, probably because it was deprecated, I had totally forgotten about start.

Hey, deathshadow, does that mean that there’s something you approve of in HTML5? :wink: