SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 80
  1. #51
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I could do quiz B since no hints were given out there though
    Quote Originally Posted by RyanReese View Post
    THen do it. Where is your answer to Paul?
    Get after it then.

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Finally

    I have two solutions now from Markbrown and Rayzur - Well done to both.

    They both work in Firefox and Safari but they didn't crack the Opera problem yet though so there's something for you to tackle Ryan if you are man enough

    Even with the clues it's no walk in the park so well done to all those that tried and if anyone can solve the opera problem send it through.

    Thanks for taking part.

  3. #53
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I also have a solution form Kravvitz for Quiz A that now works in Firefox and Safari as well ie6/7 (small problem in IE8 and still no opera yet).

    Congratulations to all who have got this far.

  4. #54
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    im looking at the clues very carefully, and i still don't get it.
    (must be my elevated temperature...)

  5. #55
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I cracked the Opera problem. I haven't yet figured out how it can be done in IE - I try to spend as little time as possible in that dark place I'm assuming it's making use of one of the many bugs with floats.

    Is the problem in Opera a bug in the browser? You can wait until the quiz is closed if it will give things away.

    Thanks for the quiz Paul and Erik,

  6. #56
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark, does your Opera fix work for 4 columns too? I've managed to get 3 columns working in Firefox 1.5+, IE5+/Win, Opera 9.5+, Safari (at least 3+), but my 4 column version only works in Firefox and Safari.

    Quote Originally Posted by Mark
    I'm assuming it's making use of one of the many bugs with floats.
    Yes and no. It's a bug related to floats... (perhaps that's all I should say.)

    Off Topic:

    Are any of you available to chat via IM (any network) sometimes? (I know Timo and RyanReese are.)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #57
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Mark, does your Opera fix work for 4 columns too? I've managed to get 3 columns working in Firefox 1.5+, IE5+/Win, Opera 9.5+, Safari (at least 3+), but my 4 column version only works in Firefox and Safari.
    Hi Kravvitz, yes - my fix for opera does seem to work fine with any number of columns.
    Off Topic:

    Are any of you available to chat via IM (any network) sometimes? (I know Timo and RyanReese are.)
    Off Topic:

    Yeah i'm usually accessible with google talk @ markbrown4

  8. #58
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Off Topic:

    Are any of you available to chat via IM (any network) sometimes? (I know Timo and RyanReese are.)
    Off Topic:


    I try to not chat via IM with people unless I have to, or have a need to. However if someone does want mine then PM me.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #59
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My 3 column version is new working in Firefox 1.0+, IE5+/Win, Opera 7.2+, Safari (at least 3+) and my 4 column version in Firefox 1.0+, IE8/Win, Opera 7.2+, Safari (at least 3+).
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #60
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Solutions flooding in now

    Both Mark and Kravvitz have cracked the Opera bug so well done to both.

    Kravvitz has also wrapped up the IE versions so his version is now working in IE6 - 8, FF3+, Opera9+,Safari3+ and at the moment is front runner with Mark in second place.

    I've also had an entry form PaulSweatte which was a good effort but still needs a little more work.

    Unless anybody wants a go I'll post solutions on Sunday so shout if you are still working on this and want it left open.

    Well done to all so far

  11. #61
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Solution Time:

    Ok, time to wrap this up now as enthusiasm is waning

    Thanks to all those that took part and it's time to announce the winners.

    The winner to Quiz A is Kravvitz and the winner to quiz B is Gary Turner.

    The runners up to quiz A were Markbrown and Rayzur who were very close. Well done to all.

    Quiz A was quite a tough quiz even with the clues I'd been throwing out. In case you still haven't understood the method I will just describe it briefly.

    Each column needed to be dragged upward to the top of the first list item but no further. This can be made to happen by having a float above a cleared element and then using a large negative margin on that cleared element.

    In good browsers the element is dragged up towards the float but no further because it had been set to clear. The browser should increase the top margin of a cleared element so that it clears the float. Therefore the massive top negative margin is recomputed by the browsers so that the element just clears the float.

    A simple example shows this in action.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    h1 {float:left}
    p {
        clear:both;
        margin-top:-100px;
    }
    </style>
    </head>
    <body>
    <h1>Why is this the following text still below this line in all browsers except IE6/7 and why is this useful?</h1>
    <p>Following text</p>
    </body>
    </html>
    The p element has a negative margin-top but it doesn't appear to have moved at all.

    This behaviour allows us to apply a sufficiently large margin to our list elements and still have them align nicely at the top without going past the floated element that acts as a roadblock.

    Here is the original solution that Erik and I came up with which in essence is quite simple.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>List Items Divided in Ordered Columns</title>
    <style type="text/css">
    #columnlist {
        margin:auto;
        width:80&#37;;
        font:75%/1.5 arial;
    }
    #columnlist h1 {
        float:left;
        width:100%;
        font-size:167%;
    }
    #columnlist ul {
        margin:0;
        padding:0;
    }
    #columnlist li {
        list-style:none;
        width:33%;
    }
    #columnlist .col1 {
        color:#c00;
    }
    #columnlist .col2 {
        margin-left:33.5%;
        color:#990;
    }
    #columnlist .col3 {
        margin-left:67%;
        color:#090;
    }
    #columnlist .col1+.col2, #columnlist .col2+.col3 {
        clear:left;
        margin-top:-9999px;
    }
    
    /* opera*/
    .col1+.col2:before,
    .col2+.col3:before{
        content:"."; 
      display:block; 
      height:0;
        float:none;
        clear:both;
        visibility:hidden;
    }
    
    /* IE7 */
    *+html #columnlist .col1+.col2, *+html #columnlist .col2+.col3 {
        clear:none;
        margin-top:0;
    }
    *+html #columnlist .col1 {
        clear:left;
        float:left;
    }
    *+html #columnlist .col2 {
        position:relative;
        left:-33.5%;
        clear:right;
        float:right;
        margin:0;
    }
    *+html #columnlist .col3 {
        position:relative;
        right:-34%;
        margin:0;
    }
    /* IE6 */
    * html #columnlist .col1 {
        clear:left;
        float:left;
        margin-left:-3px;
    }
    * html #columnlist .col2 {
        position:relative;
        left:-33.5%;
        clear:right;
        float:right;
        margin:0 -3px 0 0;
    }
    * html #columnlist .col3 {
        position:relative;
        right:-34%;
        margin:0;
    }
    </style>
    </head>
    <body>
    <div id="columnlist">
        <h1>CSS2 - List Items Divided in Ordered Columns</h1>
        <ul>
            <li class="col1">Column One, Item 1</li>
            <li class="col1">Column One, Item 2</li>
            <li class="col1">Column One, Item 3</li>
            <li class="col1">Column One, Item 4</li>
            <li class="col1">Column One, Item 5</li>
            <li class="col1">Column One, Item 6</li>
            <li class="col1">Column One, Item 7</li>
            <li class="col1">Column One, Item 8</li>
            <li class="col1">Column One, Item 9</li>
            <li class="col1">Column One, Item 10</li>
            <li class="col1">Column One, Item 11</li>
            <li class="col1">Column One, Item 12</li>
            <li class="col1">Column One, Item 13</li>
            <li class="col1">Column One, Item 14</li>
            <li class="col1">Column One, Item 15</li>
            <li class="col1">Column One, Item 16</li>
            <li class="col1">Column One, Item 17</li>
            <li class="col1">Column One, Item 18</li>
            <li class="col2">Column Two, Item 19</li>
            <li class="col2">Column Two, Item 20</li>
            <li class="col2">Column Two, Item 21</li>
            <li class="col2">Column Two, Item 22</li>
            <li class="col2">Column Two, Item 23</li>
            <li class="col2">Column Two, Item 24</li>
            <li class="col2">Column Two, Item 25</li>
            <li class="col2">Column Two, Item 26</li>
            <li class="col2">Column Two, Item 27</li>
            <li class="col2">Column Two, Item 28</li>
            <li class="col2">Column Two, Item 29</li>
            <li class="col2">Column Two, Item 30</li>
            <li class="col3">Column Three, Item 31</li>
            <li class="col3">Column Three, Item 32</li>
            <li class="col3">Column Three, Item 33</li>
            <li class="col3">Column Three, Item 34</li>
            <li class="col3">Column Three, Item 35</li>
            <li class="col3">Column Three, Item 36</li>
            <li class="col3">Column Three, Item 37</li>
            <li class="col3">Column Three, Item 38</li>
            <li class="col3">Column Three, Item 39</li>
            <li class="col3">Column Three, Item 40</li>
            <li class="col3">Column Three, Item 41</li>
            <li class="col3">Column Three, Item 42</li>
            <li class="col3">Column Three, Item 43</li>
            <li class="col3">Column Three, Item 44</li>
            <li class="col3">Column Three, Item 45</li>
            <!-- number of items can change
        <li class="col3">Column Three, Item 46</li>
        <li class="col3">Column Three, Item 47</li>
        <li class="col3">Column Three, Item 48</li> -->
        </ul>
    </div>
    </body>
    </html>
    The opera fix that you all struggled with was achieved by placing an empty element at the top of the list using the :before pseudo class.

    Code:
    /* opera*/
    .col1+.col2:before,
    .col2+.col3:before{
        content:"."; 
      display:block; 
      height:0;
        float:none;
        clear:both;
        visibility:hidden;
    }
    Quiz B by Paul Sweatte:

    Quiz B was also quite difficult unless you knew the technique and it's no surprise that Gary was first to chime in because he has actually documented this method on his very informative site.

    The technique requires setting an emmpty 100% high inline-block element which controls the vertical alignment of other inline-block elements in that section. read the link at Gary's site for a full understanding of the technique.

    The only problem in a 100% wide viewport technique was that you need to protect the 100% high element so that it doesn't get pushed down which can be accomplished by wrapping all the other inline elements in another inline block element with a 99% width or as Gary has done using white-space nowrap at strategic places.

    The original solution from Paul Sweatte (which I have amended slightly) is as follows:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, .content, .placeholder {
        height: 100%;
        margin:0;
        padding:0;
    }
    img {
        width:16px;
        height:16px;
        margin-left: 20px;
        margin-top: 10px;
    }
    .wrapper {
        width: 99%;
        display:inline-block;
    }
    .wrapper, .content, .placeholder {vertical-align: middle;}
    .placeholder, .wrapper {display: inline-block;}
    .content {display: inline;}
    
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrapper {display:inline;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="content">
        <div class="wrapper"> <img src="http://microsoft.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://microsoft.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> <img src="http://mozilla.com/favicon.ico"> <img src="http://webkit.org/favicon.ico"> <img src="http://userbase.kde.org/favicon.ico"> <img src="http://www.srware.net/favicon.ico"> <img src="http://build.chromium.org/favicon.ico"> <img src="http://www.apple.com/favicon.ico"> <img src="http://opera.com/favicon.ico"> </div>
    </div>
    <span class="placeholder"></span>
    </body>
    </html>
    The solution from Garyis actually much cleaner and is re-produced below.

    Garys Solution: Quiz B

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    <title>css quiz 30</title>
    <style type="text/css">
    /*<![CDATA[*/
      body, html {
        min-height: 100%;
        padding: 0;
        margin: 0;
    }
    * html,  * html body {
        height: 100%
    }
    #wrapper {
        position: absolute;
        height: 100%;
        white-space: nowrap;
    }
    span {
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    b {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
      /*]]>*/
    </style>
    </head>
    <body>
    <div id="wrapper"> <span><img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /> <img src="test1.gif"
             alt="red rectangle"
             height="50"
             width="30" /> <img src="test2.gif"
             alt="blue rectangle"
             height="30"
             width="50" /></span> <b> </b> </div>
    <!-- end wrapper -->
    </body>
    </html>
    Kravvitz solution - Quiz B:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    html, body {
      color: #000;
      background-color: #fff;
      text-align: center;
      margin: 0;
      padding: 0;
      /* hide from IE5/Mac \*/
        height:100%;
      /* end hide */
    }
    
    #pageContainer {
      display:-moz-inline-stack;
      display:inline-block;
      width: 99%;
      vertical-align: middle;
    }
    div.wrapper {
      display: block;
      width: 100%;
    }
    
    div.wrapper img {
      vertical-align: middle;
    }
    
    /* 
    
    This works in IE5+/Win, Firefox, Opera 9.5+, Safari (at least 3+), 
    Google Chrome, Netscape 7.x.
    
    It will work in Opera 9.0+ too, if you give ".vShim" a width.
    
    An interesting thing is that giving "overflow:hidden" to ".vShim" breaks this 
    in Firefox 1.0-2.x and Netscape 7.2.
    
    */
    
    .vShim {
      display:-moz-inline-box;
      display:inline-block;
      height: 100%;
      vertical-align: middle;
      width: 1px;
    }
    
    *:first-child+html #pageContainer,
    *:first-child+html .vShim {
      display: inline;
    }
    * html #pageContainer,
    * html .vShim {
      display: inline;
    }
    
    </style>
    </head>
    <body>
    
    <div id="pageContainer">
      <div class="wrapper">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
    <img src="bigx.png" alt="">
    <img src="bullseye.jpg" alt="">
      </div>
    </div>
    
    <div class="vShim"></div>
    </body>
    </html>
    The Submitted solutions to Quiz A follow in the next post.

  12. #62
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Solutions to Quiz A:

    Only Kravvitz's version is working in all browsers.

    Kravvitz's Solution:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>List Items Divided in Ordered Columns</title>
    <style type="text/css">
    #columnlist { /* the parent of the list and immediately preceeding floated 
                     element must be floated or absolutely positioned or else the  
                     section disappears in Firefox 1.0 and Opera 7.2-8.x.
                     (display:inline-block fixes this in those versions of Opera, 
                     but the equivalent values for the display property in 
                     Firefox 1.0 don't fix this in it.) */
        width:80&#37;;
        font:75%/1.5 arial;
        background: #fb3;
        float: left;
        display: inline;
        margin-left: 10%;
    }
    
    #columnlist h1 {
        font-size:167%;
        width: 100%;
        float: left;
    }
    
    
    #columnlist ul {
        margin:0;
        padding:0;
        line-height: 1.4;
        width: 100%;
    }
    
    #columnlist li {
        list-style:none;
        width:33%;
        position:relative;
        display: block;
    }
    
    /* Firefox 1.0+, IE5+/Win, Opera 7.2+, Safari (at least 3+) */
    
    li.col1 {
      margin-right: 66%;
    }
    li.col2 {
      margin-left: 33%;
      margin-right: 33%;
    }
    li.col3 {
      margin-left: 66%;
    }
    
    li.col1:first-child,
    li.col1+li.col2,
    li.col2+li.col3 { /* FF2 needs "li.col1:first-child" to have this */
      margin-top: -9999px;
      clear: left;
    }
    
    li.col1:first-child:before,
    li.col1+li.col2:before,
    li.col2+li.col3:before { /* this rule is for Firefox 1.0 and Opera */
      clear: left;
      display: block;
      content: ".";
      height: 0;
      visibility: hidden;;
    }
    
    *>html head+body #columnlist ul { /* for IE5/Mac, in which this mostly works. */
      display: inline-block;
      clear: both;
    }
    /* since it doesn't support the :before pseudo-element the first element of 
    each column will be hidden, that can be prevented for the 1st column though. */
    *>html head+body li.col1:first-child { 
      margin-top: 0;
    }
    
    </style>
    <!--[if lte IE 7]><style type="text/css">
    li.col1 {
      float: left;
      clear: left;
      margin-right: 0;
    }
    li.col2 {
      margin-left:0;
      margin-right: 0;
      float: right;
      clear: right;
      right: 33%;
    }
    li.col3 {
      left: 33%;
      margin-left: 33%;
    }
    * html li.col2 {
      margin-left: -32%;
      ma\rgin-left: 0;
      display: inline;
      ma\rgin-right: -3px;
      r\ight: 34%;
    }
    li.col1:first-child,
    li.col1+li.col2 {
      margin-top: auto;
    }
    li.col2+li.col3 {
      margin-top: auto;
      clear: none;
    }
    </style><![endif]-->
    </head>
    <body>
    <div id="columnlist">
        <h1>CSS2 - List Items Divided in Ordered Columns</h1>
        <ul>
            <li class="col1">Column One, Item 1</li>
            <li class="col1">Column One, Item 2</li>
            <li class="col1">Column One, Item 3</li>
            <li class="col1">Column One, Item 4</li>
            <li class="col1">Column One, Item 5</li>
            <li class="col1">Column One, Item 6</li>
            <li class="col1">Column One, Item 7</li>
            <li class="col1">Column One, Item 8</li>
            <li class="col1">Column One, Item 9</li>
            <li class="col1">Column One, Item 10</li>
            <li class="col1">Column One, Item 11</li>
            <li class="col1">Column One, Item 12</li>
            <li class="col1">Column One, Item 13</li>
            <li class="col1">Column One, Item 14</li>
            <li class="col1">Column One, Item 15</li>
            <li class="col1">Column One, Item 16</li>
            <li class="col1">Column One, Item 17</li>
            <li class="col1">Column One, Item 18</li>
            <li class="col2">Column Two, Item 19</li>
            <li class="col2">Column Two, Item 20</li>
            <li class="col2">Column Two, Item 21</li>
            <li class="col2">Column Two, Item 22</li>
            <li class="col2">Column Two, Item 23</li>
            <li class="col2">Column Two, Item 24</li>
            <li class="col2">Column Two, Item 25</li>
            <li class="col2">Column Two, Item 26</li>
            <li class="col2">Column Two, Item 27</li>
            <li class="col2">Column Two, Item 28</li>
            <li class="col2">Column Two, Item 29</li>
            <li class="col2">Column Two, Item 30</li>
            <li class="col3">Column Three, Item 31</li>
            <li class="col3">Column Three, Item 32</li>
            <li class="col3">Column Three, Item 33</li>
            <li class="col3">Column Three, Item 34</li>
            <li class="col3">Column Three, Item 35</li>
            <li class="col3">Column Three, Item 36</li>
            <li class="col3">Column Three, Item 37</li>
            <li class="col3">Column Three, Item 38</li>
            <li class="col3">Column Three, Item 39</li>
            <li class="col3">Column Three, Item 40</li>
            <li class="col3">Column Three, Item 41</li>
            <li class="col3">Column Three, Item 42</li>
            <li class="col3">Column Three, Item 43</li>
            <li class="col3">Column Three, Item 44</li>
            <li class="col3">Column Three, Item 45</li>
            <!-- number of items can change  -->
        <li class="col3">Column Three, Item 46</li>
        <li class="col3">Column Three, Item 47</li>
        <li class="col3">Column Three, Item 48</li>
        </ul>
    </div>
    
    </body>
    </html>


    Mark Brown's : quiz A:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>List Items Divided in Ordered Columns</title>
    <style type="text/css">
    #columnlist {
        margin: auto;
        width: 80%;
        font: 75%/1.5 arial;
    }
    h1 {
        font-size: 167%;
    }
    ul {
        margin: -9999px 0 0 0;
        padding: 0;
        list-style: none;
        float: left;
        width: 100%;
    }
    li {
        width: 20%;
        margin: 0;
        padding: 0;
    }
    .col1 {
        color: #c00;
        margin-right: 80%
    }
    .col2 {
        color: #990;
        margin: 0 60% 0 20%
    }
    .col3 {
        color: #090;
        margin: 0 40% 0 40%
    }
    .col4 {
        color: purple;
        margin: 0 20% 0 60%
    }
    .col5 {
        color: black;
        margin-left: 80%
    }
    ul:before {
        content: '.';
        float: left;
        width: 100%;
        height: 9999px;
    }
    .col1 + .col2, .col2 + .col3, .col3 + .col4, .col4 + .col5 {
        margin-top: -9999px;
    }
    .col1 + .col2:before, .col2 + .col3:before, .col3 + .col4:before {
        clear: left
    }
    </style>
    </head>
    <body>
    <div id="columnlist">
        <h1>CSS2 - List Items Divided in Ordered Columns - FF3.5/Opera/IE8</h1>
        <ul>
            <li class="col1">Column One, Item 1</li>
            <li class="col1">Column One, Item 2</li>
            <li class="col1">Column One, Item 3</li>
            <li class="col1">Column One, Item 4</li>
            <li class="col1">Column One, Item 5</li>
            <li class="col1">Column One, Item 6</li>
            <li class="col1">Column One, Item 7</li>
            <li class="col1">Column One, Item 8</li>
            <li class="col1">Column One, Item 9</li>
            <li class="col1">Column One, Item 10</li>
            <li class="col1">Column One, Item 11</li>
            <li class="col1">Column One, Item 12</li>
            <li class="col1">Column One, Item 13</li>
            <li class="col1">Column One, Item 14</li>
            <li class="col1">Column One, Item 15</li>
            <li class="col1">Column One, Item 16</li>
            <li class="col1">Column One, Item 17</li>
            <li class="col1">Column One, Item 18</li>
            <li class="col2">Column Two, Item 19</li>
            <li class="col2">Column Two, Item 20</li>
            <li class="col2">Column Two, Item 21</li>
            <li class="col2">Column Two, Item 22</li>
            <li class="col2">Column Two, Item 23</li>
            <li class="col2">Column Two, Item 24</li>
            <li class="col2">Column Two, Item 25</li>
            <li class="col2">Column Two, Item 26</li>
            <li class="col2">Column Two, Item 27</li>
            <li class="col2">Column Two, Item 28</li>
            <li class="col2">Column Two, Item 29</li>
            <li class="col2">Column Two, Item 30</li>
            <li class="col3">Column Three, Item 31</li>
            <li class="col3">Column Three, Item 32</li>
            <li class="col3">Column Three, Item 33</li>
            <li class="col3">Column Three, Item 34</li>
            <li class="col3">Column Three, Item 35</li>
            <li class="col3">Column Three, Item 36</li>
            <li class="col3">Column Three, Item 37</li>
            <li class="col3">Column Three, Item 38</li>
            <li class="col3">Column Three, Item 39</li>
            <li class="col3">Column Three, Item 40</li>
            <li class="col3">Column Three, Item 41</li>
            <li class="col3">Column Three, Item 42</li>
            <li class="col3">Column Three, Item 43</li>
            <li class="col3">Column Three, Item 44</li>
            <li class="col3">Column Three, Item 45</li>
            <li class="col4">Column Four, Item 46</li>
            <li class="col4">Column Four, Item 47</li>
            <li class="col4">Column Four, Item 48</li>
            <li class="col4">Column Four, Item 49</li>
            <li class="col4">Column Four, Item 50</li>
            <li class="col4">Column Four, Item 51</li>
            <li class="col4">Column Four, Item 52</li>
            <li class="col4">Column Four, Item 53</li>
            <li class="col4">Column Four, Item 54</li>
            <li class="col4">Column Four, Item 55</li>
            <li class="col4">Column Four, Item 56</li>
            <li class="col4">Column Four, Item 57</li>
            <li class="col4">Column Four, Item 58</li>
            <li class="col4">Column Four, Item 59</li>
            <li class="col4">Column Four, Item 60</li>
            <li class="col4">Column Four, Item 61</li>
            <li class="col4">Column Four, Item 62</li>
            <li class="col4">Column Four, Item 63</li>
            <li class="col4">Column Four, Item 64</li>
            <li class="col4">Column Four, Item 65</li>
            <li class="col4">Column Four, Item 66</li>
            <li class="col4">Column Four, Item 67</li>
            <li class="col5">Column Five, Item 68</li>
            <li class="col5">Column Five, Item 69</li>
            <li class="col5">Column Five, Item 70</li>
            <li class="col5">Column Five, Item 71</li>
            <li class="col5">Column Five, Item 72</li>
            <li class="col5">Column Five, Item 73</li>
            <li class="col5">Column Five, Item 74</li>
            <li class="col5">Column Five, Item 75</li>
            <li class="col5">Column Five, Item 76</li>
            <li class="col5">Column Five, Item 77</li>
            <li class="col5">Column Five, Item 78</li>
            <li class="col5">Column Five, Item 79</li>
            <li class="col5">Column Five, Item 80</li>
            <li class="col5">Column Five, Item 81</li>
            <li class="col5">Column Five, Item 82</li>
            <li class="col5">Column Five, Item 83</li>
            <li class="col5">Column Five, Item 84</li>
            <li class="col5">Column Five, Item 85</li>
            <li class="col5">Column Five, Item 86</li>
            <li class="col5">Column Five, Item 87</li>
        </ul>
    </div>
    </body>
    </html>
    Rayzur's Solution : Quiz A

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Rayzur Quiz 30-A (Modern Browsers and IE6-8)</title>
    
    <style type="text/css">
    
    *{margin:0;padding:0;}
      
    #columnlist {
        margin:30px auto;
        width:750px;
        font:75%/1.5 arial;
        background:#000;
        border:1px solid #000;
    }
    #columnlist h1 {
        font:bold 1.55em/1.25 "courier new",georgia;  
        padding:10px 0;
        text-align:center;
        background:#BBF;
        border-bottom:1px solid #000;
    }
    #columnlist ul {
        margin:0;
        padding:0;
        background:#000;
        font-weight:bold;
    }
    li:first-child {
        float:left;
        background:#F0F;
    }
    .col1,.col2,.col3 {
        clear:both;
        list-style:none;
        margin:0;
        padding:0 5px;
        width:240px;/*250 total*/
        height:1.65em;
    }
    .col1 {
        background:#F6F;
    }
    .col1+.col2 {
        margin-top:-2000px;
        background:#09F;
    }
    .col2 {
        margin-left:250px;
        background:#0EF;
        position:relative; top:-1.65em;
    }
    .col2+.col3 {
        margin-top:-2000px;
        background:#090;
    }
    .col3 {
        margin-left:500px;
        background:#0F0;
        position:relative; top:-1.65em;
    }
    li:last-child {background:#8F8;}
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    
    #columnlist{
        width:750px;
        overflow:hidden;/*hide oversized ul needed for RP*/
    }
    #columnlist ul {
        margin:0;
        padding:0 250px;
        width:500px;/*1000px actual width with padding for RP*/
    }
    li:first-child {
        float:right;/*reset from main css for IE7*/
    }
    .col1+.col2,
    .col2+.col3 {margin-top:0}/*reset from main css for IE7*/
    
    .col1 {
        float:right;
        clear:right;
        margin-right:-250px; display:inline;
        position:relative;
        right:750px;
        color:#000;
        background:#F7F;
    }
    .col2 {
        float:left;
        clear:left;
        margin-left:-250px; display:inline;
        position:relative;
        top:0;/*reset from main css*/
        left:250px;
        color:#000;
        background:#0EF;
    }
    .col3 {
        float:left;
        margin-left:250px; display:inline;
        color:#000;
        background:#0F0;
        position:static;/*reset from main css*/
        clear:none;/*reset from main css*/
    }
    </style>
    <![endif]-->
    
    </head>
    <!-- http://www.css-lab.com/misc-test/quiz-30.html -->
    <body>
    <div id="columnlist">
        <h1>CSS2 - List Items Divided in Ordered Columns<br>Modern Browsers and IE6-8</h1>
    
        <ul>
            <li class="col1">Column One, Item 1</li>
            <li class="col1">Column One, Item 2</li>
            <li class="col1">Column One, Item 3</li>
            <li class="col1">Column One, Item 4</li>
            <li class="col1">Column One, Item 5</li>
    
            <li class="col1">Column One, Item 6</li>
            <li class="col1">Column One, Item 7</li>
            <li class="col1">Column One, Item 8</li>
            <li class="col1">Column One, Item 9</li>
            <li class="col1">Column One, Item 10</li>
    
            <li class="col2">Column Two, Item 11</li>
    
            <li class="col2">Column Two, Item 12</li>
            <li class="col2">Column Two, Item 13</li>
            <li class="col2">Column Two, Item 14</li>
            <li class="col2">Column Two, Item 15</li>
            <li class="col2">Column Two, Item 16</li>
            <li class="col2">Column Two, Item 17</li>
    
            <li class="col2">Column Two, Item 18</li>
            <li class="col2">Column Two, Item 19</li>
            <li class="col2">Column Two, Item 20</li>
            <li class="col2">Column Two, Item 21</li>
            <li class="col2">Column Two, Item 22</li>
            <li class="col2">Column Two, Item 23</li>
    
            <li class="col3">Column Three, Item 24</li>
            <li class="col3">Column Three, Item 25</li>
            <li class="col3">Column Three, Item 26</li>
            <li class="col3">Column Three, Item 27</li>
            <li class="col3">Column Three, Item 28</li>
            <li class="col3">Column Three, Item 29</li>
    
            <li class="col3">Column Three, Item 30</li>
            <li class="col3">Column Three, Item 31</li>
            <li class="col3">Column Three, Item 32</li>
            <li class="col3">Column Three, Item 33</li>
            <li class="col3">Column Three, Item 34</li>
            <li class="col3">Column Three, Item 35</li>
    
            <li class="col3">Column Three, Item 36</li>
            <li class="col3">Column Three, Item 37</li>
            <li class="col3">Column Three, Item 38</li>     
        </ul>
    </div>
    </body>
    </html>
    Apologies if I forgot to mention anyone or and thanks to all takng part and again to Erik and Paul for the ideas.

    Hope you had fun and maybe learned something new along the way

  13. #63
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, thanks for the excellent quizzes, guys.

    Does anybody see a way so that the last column in the list doesn't have to be the longest (without using JS)? That seems to be the big issue that would be good to find a solution for.

    Mark, were you trying to get 5 columns to work in IE6-7?

    Also, I'm curious, did anyone attempt either of these but not post a comment?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #64
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The winner to Quiz A is Kravvitz and the winner to quiz B is Gary Turner.

    The runners up to quiz A were Markbrown ....
    Congratulations guys! Very clever solutions.

    Thanks for the interesting quiz Erik J., it definitely had me scratching my head before Paul dropped some clues. Even after that, Opera had me befuddled.

    @Paul Sweatte:
    I never got around to the vertical-align quiz but I will be sure to look through the solutions.

    @Paul O'B:
    So, the big question. Was Opera wrong in the way it handled the negative margins without the :before fix?

    I am definitely getting some strange behavior from Opera with various testing of cleared elements with neg margins.

    Here is a Test Case of a cleared element with negative top margin on the cleared float also. (it could happen in a real situation.)

    After the Opera Fix was worked in to my original submission I have set a top margin on the floated h1 to show what is going on above it. Once again, Opera is the odd man out in that it allows the BG colors of the center and right column to protrude.

    I also noted that my original code had heights set on the list items (not optimal I know, but it could happen). The Opera fix did not work until I removed the heights. The li height is commented out in that revised version I just linked to, break the comments loose and Opera falls apart.

    Any thoughts on those test conditions?

  15. #65
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    enthusiasm was waning because i was completely away from the pc for the last 2 and a half days, too bad i never got the chance to properly try these out, although i could still try without looking, although im not sure i can manage

    at least im well once again, and i hope everyone had some fun solving this quiz! and congratulations Kravvitz and Gary Turner!

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Rayzur View Post
    @Paul O'B:
    So, the big question. Was Opera wrong in the way it handled the negative margins without the :before fix?
    The problem with Opera in your test that once the negative top margin on the float exceeds its own height the effectively the element has no height and doesn't act as a roadblock anymore as the element beneath just passes straight through.

    For the quiz I would say opera's behaviour is a bug as the specs on clearance state that space should be applied above the element to bring it down below the float. It is supposed find the top border edge of the element and then move that top edge down below the float.

    Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.
    Opera seems to follow this rule in simple situations but doesn't seem to like it once things get more complicated.

  17. #67
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's a bug in Opera. Did you report it, Ray?

    It's interesting that the demo is displayed differently in Mozilla and Webkit browsers.

    I also noted that my original code had heights set on the list items (not optimal I know, but it could happen). The Opera fix did not work until I removed the heights.
    Thanks for finding and mentioning that issue. I've made a note in my versions for 2, 3, and 4 columns.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  18. #68
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The problem with Opera in your test that once the negative top margin on the float exceeds its own height then effectively the element has no height and doesn't act as a roadblock anymore as the element beneath just passes straight through.
    Hey Paul, I see what you are saying now.

    An Updated Test shows both conditions and Opera does indeed comply as you explained.
    I will leave that one as a permanent link.

    I remember the same principle at work when negative side margins are used to allow other elements to slide under them. I have never tested that condition with a neg margin greater than the floats width though.

    Quote Originally Posted by Kravvitz View Post
    Yeah, it's a bug in Opera. Did you report it, Ray?

    It's interesting that the demo is displayed differently in Mozilla and Webkit browsers.
    Hi Kravvitz,
    No I have not reported it yet as I am still unsure if it's a bug. Paul seems to imply that it is not a bug but that the float has lost it's height and the ability to block the cleared div.

    It is definitely enough to cause chaos.

    Does the majority win just because the specs are undefined in this area? I don't know.

    Like I noted in my test, they were not all the same either. Opera was the one that let the float escape though.
    Thanks for finding and mentioning that issue. I've made a note in my versions for 2, 3, and 4 columns.
    No problem, it was something I stumbled upon when merging the Opera fix in with my original code. It was the one thing that keep my code from working.

  19. #69
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the insight into these advanced float techniques as well as the white-space trick from Gary, this type of creativity is priceless. I can't wait to see what's in store for next month.

  20. #70
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulsweatte View Post
    Thanks for the insight into these advanced float techniques as well as the white-space trick from Gary, this type of creativity is priceless.
    It is indeed a handy trick. However, there is a downside to it. IE5.x/Win ignores any white-space declarations applied to descendant elements when an element has white-space:nowrap set. If you don't care about how badly things might break in IE5.x, then you're fine though.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  21. #71
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Mark, were you trying to get 5 columns to work in IE6-7?
    nah, I didn't spend a lot of time trying to get things working in IE. I find it too frustrating

  22. #72
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i finnaly found out what completely stopped me from solving this quiz, i kept trying to do this while affecting all of the rows, i knew i had to use the first one, but didn't know how, basically i was trying to get something like "Kravvitz's" IE solution (very good work btw) but never reached that either, because at first i thought that the first element in the list was the float block (and not the h1), so essentially i kept on going in loops (and going to bed with fever too)
    basically this is what i was missing in my mind ".col1+.col2", selects first col2 after col1.

    never again!

  23. #73
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    The bit that stopped me getting there without any clues is I couldn't shake the idea of needing to float all the li elements.
    basically this is what i was missing in my mind ".col1+.col2", selects first col2 after col1.
    I didn't know how that selector worked either but I figured i'd need to do something with those first items. I put a 'break' class on those items at the beginning and then removed after looking through the list of css 2.1 selectors.

  24. #74
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Also, I'm curious, did anyone attempt either of these but not post a comment?
    I expect lots of people did. I certainly had a go at both, but was way off and had limited time, so just decided to wait for the results. Fascinating experiments. I love picking over the solutions of these quizzes afterwards.

  25. #75
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)


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
  •