SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIVs break OL sequence IE

    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>

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,837
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    <ol start="4">

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

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    <ol start="4">

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

    Quote Originally Posted by Paul O'B View Post
    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?

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LoveFest View Post
    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.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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+

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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).

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I've noticed that Jakob Nielsen's page uses the deprecated "start" attribute, and it works in more browsers than the counters().

  9. #9
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,837
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •