DIVs break OL sequence IE

**LoveFest** · Jun 6, 2011 11:53

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:

Code:

<!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>

**Stevie D** · Jun 6, 2011 12:29

<ol start="4">

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

**Paul O'B** · Jun 6, 2011 13:24

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:

Code:

<!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).

**Stomme poes** · Jun 7, 2011 01:09

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

**Stevie D** · Jun 7, 2011 04:35

Originally Posted by Stomme poes

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

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.

**deathshadow60** · Jun 7, 2011 07:59

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.

**LoveFest** · Jun 13, 2011 14:34

Originally Posted by Stevie D

<ol start="4">

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

Nice!

Originally Posted by Paul O'B

Hi,
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).

What kind of counters? Javascript?

**deathshadow60** · Jun 13, 2011 19:07

Originally Posted by LoveFest

What kind of counters? Javascript?

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.

**deathshadow60** · Jun 13, 2011 19:16

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

Code:

<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>

Code:

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.

**Paul O'B** · Jun 14, 2011 01:34

Originally Posted by deathshadow60

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

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.

Code:

<!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;
}


.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;
}

</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+

**PatrickSamphire** · Jun 14, 2011 07:28

Originally Posted by deathshadow60

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

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?

User Tag List

Thread: DIVs break OL sequence IE

Thread Tools

Display

DIVs break OL sequence IE

Bookmarks

Bookmarks

Posting Permissions