SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 63
  1. #26
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I very much want to join in on all four quizzes. I have another three clients I need to finish my work for first, so I'm hoping the quiz will be open for some more time.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Are you sure you worked out a way that will work in IE6/7 Paul? Not changing the HTML and replicating the effect in good browsers was easy.
    The second part of the shadow quiz can be done in ie6/7 without changing the html at all but you may need to filter through some proprietary IE code to complete the effect.

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I very much want to join in on all four quizzes. I have another three clients I need to finish my work for first, so I'm hoping the quiz will be open for some more time.
    Hi Maleika,

    Yes I will leave these quizzes open longer than usual especially as there are four of them. I thought it would make it more interesting to do in batches as you can pick and choose

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have a correct entry for both parts of quiz 4 (shadow text) from Erik J which works just as expected Thanks Erik.

  5. #30
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed that the screenshot for this Quiz 2 was clipped at the left side.

    Here is the screenshot uncut where also IE6 shows.

    .
    Happy ADD/ADHD with Asperger's

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks Erik

    I'll leave the quizzes running over the weekend to give a few more people a chance to have a go.

  7. #32
    SitePoint Member levanhen01's Avatar
    Join Date
    Jun 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks this test. I'm improve my skill CSS

  8. #33
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    by the looks of it im not making it.
    ill just try after the quiz has ended without looking at the answers...

  9. #34
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the 4th quiz 2nd part it's easily done, but then the CSS code becomes very dependent on the heading. For example, if we change the heading text, the shadow effect won't work anymore. So I think the solution for the 1st part is more usable.

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mikelalala View Post
    In the 4th quiz 2nd part it's easily done, but then the CSS code becomes very dependent on the heading. For example, if we change the heading text, the shadow effect won't work anymore. So I think the solution for the 1st part is more usable.
    If you have a solution then PM it to me as there are not that many entries for the 4th quiz as yet.

    Remember that not all the quizzes have a real life usage and are mainly for fun and exploring the limits of CSS

  11. #36
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Backkk guys. When will be answers?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Backkk guys. When will be answers?
    I don't think anyone but Erik has fully solved them yet (to my liking anyway).

    I'll post answers on Sunday anyway.

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Bah I'll have a second shot at them...all 4.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Solution Time

    Thanks to everyone that took part and had a go and anyone that watched with interest.

    Thanks especially to Gary, Maleika, Erik, Eric Watson and Ryan for taking part.

    Erik is the overall winner as he completed three of the quizzes (it would have been four but that as his quiz anyway). Gary had the quickest entry for the equal spread and although it only works in modern browsers but as there were no other closer entries than Gary wins that one

    I'm short of time as I am away on holiday tomorrow for 2 1/2 weeks so forgive that these explanations are short but I'm sure Erik can fill you in with the details later if you have questions while I'm away.


    Quiz 1 (advert to the side of page and no scrollbar)

    This confused a few of you and I thought you would find it easy but most of you stumbled on this.

    Here is my original solution:
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{
        margin:0;
        padding:0;
    }
    h1,p{margin:0 0 1em}
    #page {
        width:760px;
        margin: auto;
        text-align:left;
        background:red;
            position:relative;
            z-index:2;
    }
    #adholder {
        width: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    #adinner {
        width:760px;
        margin:auto;
    }
    .adright,.adleft {
        width:160px;
        position: relative;
        margin:0;
        float:left;
        height:600px;
        overflow: hidden;
        background:#52b502;/* for testing */
        z-index:99;
            display:inline;
    }
    .adright{float:right;left:170px;}
    .adleft{left:-170px}
    
    </style>
    </head>
    <body>
    <div id="adholder">
    <div id="adinner">
        <div class="adright">Advert goes here</div>
        <div class="adleft">Advert goes here</div>
    </div>
    </div>
    <div id="page">
    <h1><a href="#">Centred page content goes here</a></h1>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>
    And here is Eriks winning entry:
    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>Quiz #24a / Erik J</title>
    <style type="text/css">
    html,
    body{
        margin:0;
        padding:0;
        width:100%;
        min-height:100%;
    }
    html{
        overflow-y:scroll;
    }
    #adwrapper {
        position:absolute;
        width:100%;
        min-width:760px;
        min-height:100%;
        overflow:hidden;
    }
    * html #adwrapper {
        width:auto;
        height:100%;
        overflow-y:visible;
    }
    #page {
        position:relative;
        width:760px;
        margin:auto;
        padding:1px 0;
        text-align:left;
        background:red;
    }
    #ad1,
    #ad2 {
        position:absolute;
        top:0;
        right:100%;
        width:160px;
        height:700px;
        background:green;
    }
    #ad2 {
        right:auto;
        left:100%;
    }
    </style></head><body>
    <div id="adwrapper">
        <div id="page">
            <h1>Centred page content goes here</h1>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>TEST</p>
            <div id="ad1">
                <p>Advert goes here</p>
            </div>
            <div id="ad2">
                <p>Advert goes here</p>
            </div>
        </div>
    </div>
    
    </body></html>
    Quiz 2: (equal Spread)

    No one was even close to Erik's original although Gary came up with a version for modern browsers.

    Erik utilised text-align:justify to center the elements and the use of some non breaking spaces to trigger the full width of the line.
    Erik's original:
    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>Distributed Horizontal Menu</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    .nav {
        margin:auto;
        border:3px outset #66f;
        padding:0;
        min-width:42em;
        width:95%;
        height:44px;
        overflow:hidden;
        background:#039;
        text-align:justify;
        font:bold 88%/1.1 verdana;
    }
    .nav li {
        display:inline;
        list-style:none;
    }
    .nav li.last {
        margin-right:100%;
    }
    .nav li a {
        display:inline-block;
        padding:13px 4px 0;
        height:31px;
        color:#ddd;
        vertical-align:middle;
        text-decoration:none;
        text-transform:capitalize;
    }
    .nav li a:hover {
        margin:-3px;
        border:3px inset #66f;
        color:#ff6;
        background:#36c;
    }
    </style></head><body>
    
    <ul class="nav">
    <!--[test to comment out random items]
        <li>&nbsp; <a href="#">netscape&nbsp;9</a></li>
    [the spacing should be distributed]-->
        <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
        <li>&nbsp; <a href="#">opera&nbsp;10</a></li>
        <li>&nbsp; <a href="#">firefox&nbsp;3</a></li>
        <li>&nbsp; <a href="#">safari&nbsp;4</a></li>
        <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</li>
    </ul>
    
    </body></html>
    A very inventive solution I'm sure you will agree

    Gary's answer used display:table to good effect as follows in this nice demo.

    Gary:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
    <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
    <title></title>
    <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
    <meta name="author"
            content="Gary Turner" />
    <style type="text/css">
    /*<![CDATA[*/
      ul {
        display: table;
        margin: 1em auto 0;
        padding: 0;
        text-align: center;
        width: 90%;
    }
    li {
        display: table-cell;
        border: 1px solid black;
        padding: 0 5px;
    }
    
    
      /*]]>*/
    </style>
    </head>
    <body>
    <ul>
        <li>menu item</li>
    </ul>
    <ul>
        <li>menu item</li>
        <li>menu item</li>
    </ul>
    <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
    </ul>
    <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
    </ul>
    </body>
    </html>
    (Maleika (Kohoutec) also used display:table in her solution)

    Quiz 3: (Min-width)

    This quiz by Yurikolovsky was to achieve a min-width in IE6 without using scripting or expressions. You didn't actually have to look far for the answer because it is there in the CSS faq for all to see. Unfortunately not many of you spotted it. The trick is to use a wide border on an outer div and then drag the content into the border.

    In the second part of this quiz we set a trap for you because IE has a limit on how wide borders can be That's why we asked for a a rather large min-width to trigger this bug. IE will only apply a maximum border of 960px width and therefore would fail on anything larger.

    The answer is easy as you just nest two divs and give each a border.

    Yurikolovskys original normal width answer:
    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>YuriKolovsky - CSS Quiz suggestion #2 -min-width in ie6 and moving buttons</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /* for all browsers that understand min-width */
    .width {width:100%; min-width:960px;}
    /* the bodge for IE6 browsers */
    * html .minwidth {border-left:960px solid #fff; position:relative; float:left; z-index:1;}/*this star hack can be moved into some ie6 only conditional comments*/
    * html .container {margin-left:-960px; position:relative; float:left; z-index:2;}/*this star hack can be moved into some ie6 only conditional comments*/
     
    /*below is for visuals only*/
     
     
    * {
        margin:0;
        padding:0;
    }
     
    #navbar {
        width:100%;
        background:orange;
        padding-bottom:10px;
        padding-top:200px;
        border-bottom:red solid 7px;
    }
    ul {
        list-style-type:none;   
        background:orange;
        overflow:hidden;
        display:block;
        margin:0 auto;
    }
    ul li {
        display:block;
        float:left;
       
     
        position:relative;
    }
    a {
        display:block;
        color:#000;
        background-color:#ebebeb;
        padding:1em 0 1em 0;
        position:relative;
        text-align:center;
        width:95px;
       
    }
    a:hover {
        top:5px;
        left:-5px;
        position:relative;
        border-top:solid orange 7px;
        border-right:solid orange 5px;
        margin-right:1px;
     
        margin-top:-7px;
        z-index:2;
       
        margin-left:-5px;
        left:0;
        width:94px;
    }
     
    li {
        border-left:solid #999 7px;
        border-bottom:solid #000 7px;   
       
        margin:10px 0 0 4px;
    }
    i {
        border-top:solid orange 7px;
        border-bottom:0;
        border-left:0;
        border-right:solid #999 7px;
        width:0;
        display:block;
        line-height:0;
        height:0;
        position:absolute;
        left:-7px;
        top:0;
    }
    b {
        border-bottom:solid orange 7px;
        border-top:0;
        border-right:0;
        border-left:solid #000 7px;
        width:1px;
        height:0;
        display:block;
        line-height:0;
        right:0;
        bottom:-7px;
        position:absolute;
    }
     
    p {
        padding:0.2em 1em 0 1em;
    }
    </style>
     
    <!--[if lte IE 6]>
    <style type="text/css">
    b {
        right:-1px;
        bottom:-8px;
    }
    a:hover {
        border-right:solid orange 6px;
        margin-right:0px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
     
    <div class="width">
    <div class="minwidth">
    <div class="container">
     
       
        <div id="navbar">
        <ul>
            <li><a href="#1">stuff</a><i></i><b></b></li>
            <li><a href="#2">stuff</a><i></i><b></b></li>
            <li><a href="#3">stuff</a><i></i><b></b></li>
            <li><a href="#4">stuff</a><i></i><b></b></li>
            <li><a href="#5">stuff</a><i></i><b></b></li>
            <li><a href="#6">stuff</a><i></i><b></b></li>
            <li><a href="#7">stuff</a><i></i><b></b></li>
            <li><a href="#8">stuff</a><i></i><b></b></li>
            <li><a href="#9">stuff</a><i></i><b></b></li>
        </ul>
        </div>
        <div id="content">
            <p>content content, bla bla bla.<p>
            <p>no javascript solution to ie6 min-width problem<p>
            <p>the little buttons are just for the sake of fun, and doing them can add more to the quiz<p>
            <p>write instructions here.<p>
            <p>(just for you paul, this quiz can be made harder, because ie6 does not support borders larger than 960px, this means that you can make it into a additional challenge, i solved it by repeating the min-width trick 2 times with borders of 500px, but when the solution is not right infront of you, its not as easy to solve, plus it will teach them of the additional ie6 limitation) (you can add some long text here just so that the min-width is more visible when you resize window)<p>
        </div>
    </div>
    </div>
    </div>
     
    </body>
    </html>
    My answer to the second part of the quiz:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    * {
        margin:0;
        padding:0
    }
    body {
        background:#f2f2f2;
        text-align:center;
    }
    #outer {
        width:80%;
        background:#fffccc;
        margin:auto;
        text-align:left;
        position:relative;
        min-width:1024px;
        border:1px solid #ccc;
    }
    h1 {
        text-align:center;
    }
    p {
        padding:10px;
        margin:0 0 1em 0
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    #inner{border-left:512px solid #fffccc;float:left;}
    #inner2{border-left:512px solid #fffccc;float:left;}
    #content{margin-left:-1024px;height:1px;position:relative;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <div id="inner2">
                <div id="content">
                    <h1>Min-width in Ie without scripting</h1>
                    <p>This layout is restricted to a minimum of 1024px pixels but will also 
                        expand to 80% of the available space. This is useful if you have floats 
                        that you don't want to drop or images that you don't want clipped.</p>
                    <p>Ie doesn't understand min-width and the usual way to restricts its 
                        width is to use scripting or an expression, both of which rely on javascript 
                        being enabled. This layout however just uses CSS for the effect and 
                        in fact contains no hacks and would work in any browser, however I have 
                        hidden the extra styles in conditional comments because other browsers 
                        don't need them anyway as most of them understand min-width.</p>
                    <p>The concept is simple in that the min-width is achieved by nesting 
                        an element that has a left border equal to the minimum width we require. 
                        A further nesting is then used and the element is dragged across the border 
                        with negative margins.</p>
                    <p>The main drwaback is of course the 2 non-semantic divs required to 
                        do this. However its another choice that can be made if you want this 
                        effect, it's just a shame that we have to go to such lengths for a simple 
                        effect.</p>
                    <p>This is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : </p>
                    <p>This is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : his is the 
                        content : this is the content : his is the content : this is the content 
                        : his is the content : this is the content : his is the content : this 
                        is the content : his is the content : this is the content : </p>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Erik's answer using padding instead of borders:

    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>Quiz #24c / Erik J</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    .centerminwidth {
        margin:auto;
        width:90%;
        min-width:1100px;
        background:gray;
        overflow:hidden;
    }
    * html .centerminwidth {
        overflow:visible;
    }
    .ie6minwidth1, .ie6minwidth2, .ie6minwidth3 {
        float:left;
        position:relative;
    }
    * html .ie6minwidth1 {
        padding-left:1100px;
    }
    * html .ie6minwidth3 {
        margin-left:-1100px;
    }
    p {
        float:left;
        margin:0;
        border:1px solid gray;
        width:98px;
        height:100px;
        background:green;
        text-align:right;
    }
    </style>
    </head>
    <body>
    <div class="centerminwidth">
        <div class="ie6minwidth1">
            <div class="ie6minwidth2">
                <div class="ie6minwidth3">
                    <p>100px</p>
                    <p>200px</p>
                    <p>300px</p>
                    <p>400px</p>
                    <p>500px</p>
                    <p>600px</p>
                    <p>700px</p>
                    <p>800px</p>
                    <p>900px</p>
                    <p>1000px</p>
                    <p>1100px</p>
                    <p>1200px</p>
                    <p>1300px</p>
                    <p>1400px</p>
                    <p>1500px</p>
                    <p>1600px</p>
                    <p>1700px</p>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Quiz 4: (shadowed text):

    This test provided by Ryan was to produce shadowed text in all browsers and the answer was to simply overlay one piece of text on another.

    Ryans Original:
    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 {
        height:100%;
    }
    * {
        margin:0;
        padding:0;
    }
    body {
        font-size:100%
    }
    h1 {
        margin:0;
        padding:0;
        color:white;
        position:absolute;
        left:0;
        right:0;
        font-size:200%;
        font-weight:bold;
    }
    h1.overlay {
        color:darkgreen;
        position:absolute;
        left:1px;
        top:1px;
    }
    h2 {
        position:absolute;
        top:150px;
    }
    </style>
    </head>
    <body>
    <h1 class="overlay">This is the heading. It doesn't matter what font you use as long as you know this ltitle "trick" behind 
            it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</h1>
    <h1>This is the heading. It doesn't matter what font you use as long as you know this ltitle "trick" behind it. A simple quiz 
        
        if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</h1>
    <h2>This is a little textshadow which is supposed to be in CSS3...</h2>
    </body>
    </html>
    The second part of this quiz was to use the html I provided which meant you couldn't use duplicate html to achieve the effect.

    The answer was to use the :before pseudo class and place the text on top from the css rather than the html. Unfortunately Firefox didn't allow absolute positioning of the pseudo class which is why the extra span was added to the html and the text in the span was absolutely placed on top of the pseudo class content instead.

    As Ie6 doesn't understand the :before pseudo class I used the proprietary drop-shadow filter to create IE specific shadowed text.

    My original answer:

    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>
    h1 {
        position:relative;
        color:darkgreen
    }
    span {
        position:absolute;
        left:-2px;
        top:-2px;
        color:#fff
    }
    h1:before {
        display:block;
        content:"This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.";
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    h1{
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color='darkgreen', positive='true');
        zoom:1.0;
        color:#fff;
    }
    h1 span{position:static;color:#fff;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <h1><span>This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</span></h1>
    </body>
    </html>
    Eriks answer:

    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>Quiz #24d / Erik J</title>
    <style type="text/css">
    body{
        font: 400 120%/1.2 sanserif;
    }
    /* Double content */
    h1{
        position:relative;
        color:black;
        font-size:100%;
    }
    h1 span{
        position:absolute;
        top:-2px;
        left:-2px;
        color:silver;
    }
    /* CSS 2 and IEfilter */
    h2{
        position:relative;
        height:99em;
        overflow:hidden;
        color:black;
        font-size:100%;
    }
    h2:before{
        display:block;
        margin:2px 0 0 2px;
        content:"Part 2, CSS 2 and IE filter) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.";
    }
    h2 span{
        position:absolute;
        top:0;
        left:0;
        color:silver;
        filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2);
    }
    </style></head><body>
    
    <h1>
        Part 1, Double content) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.
        <span>Part 1, Double content) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.</span>
    </h1>
    
    <h2>
        <span>Part 2, CSS 2 and IE filter) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.</span>
    </h2>
    
    </body></html>
    That about wraps it up and as I mentioned above I will be away until the 5th July so you cann have a rest from the quizzes until then as I think most of you are quizzed out at the moment

    Thanks to all the contributors and participants and hope you enjoy the solutions anyway.

  15. #40
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Paul I had a solution for the quiz 1 but you siad it had to hug the sides of the red content.

    The solution you had does not touch the content

    What gives?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #41
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Posting to Quiz #3 (min-width) - Eric's answer

    Eric's CSS has an .ie6minwidth2. This needs to be added to the html for the solution to work in IE.

    I believe this was just a typo.

  17. #42
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    not looking at the answers just yet, still planning to do em, eventually xD

  18. #43
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul I had a solution for the quiz 1 but you siad it had to hug the sides of the red content.

    The solution you had does not touch the content

    What gives?
    My solution can be moved closer or further way as required. I just though it was more aesthetic to have a slight gap. It makes no difference with the method I used.

    The attachment clearly shows the position anyway

    Your solution didn't stay in tune with the centred layout which was the problem and the ads got left behind.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nadi View Post
    The Posting to Quiz #3 (min-width) - Eric's answer

    Eric's CSS has an .ie6minwidth2. This needs to be added to the html for the solution to work in IE.

    I believe this was just a typo.
    Well spotted, I've added the missing element back in

  20. #45
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quizzes 1–3 are great, each with a very real practical use!

    Quiz 2 (equal Spread): Once again, dastardly Erik came up with something totally off the wall! Because text-align:justify doesn't cause stretching on line boxes which are "too narrow" (such as the last line box of a block), most people would have abandoned hope there… but he carried on and forced there to be a second line box by placing a sufficiently large margin-right on the last LI so that it was guaranteed to wrap! However, because we don't actually want the text of the last LI to wrap with it, he needed to place some extra character after the real text so that the wrapping would occur at that point instead. (Replace his &nbsp;s with 'x's to see what's going on.) Note that the only critical $nbsp;/x is the very last one, which wraps onto the next line causing the text on the first line to justify as desired. He then added a few "cosmetic" extra &nbsp;s/x's: one at the start of the first LI and another at the end of the last LI to push their real text away from the sides; and one at the start of each other LI to ensure that the spacing between the LIs is greater than the spacing at the start and end of the line, which looks better. (Note, however, that it's not at all clear that browsers should treat &nbsp;s as "fixed"-width characters; after all, they're defined to be non-breaking, not non-stretching. It would be unwise to rely unconditionally on the "distribution" behaviour that we see in the well-known browsers!)

    However, the "closest" CSS 2.1 solution to the problem is to use display:table as several people did. (display:table is the only other horizontal space-distribution mechanism which exists in CSS 2.1, although a more general "flex" concept looks set to arrive in CSS 3.) IE6/7 don't support the table display types, but we can always just use conditional comments to place a secret TABLE and TR around the UL and secret TDs around the LIs; these warty but robust old browsers can recover gracefully from the muddled markup. (This technique also happens to be my favourite method of vertical centering.)

    That said, the display:table solution will overflow undesirably when the menu items don't want to fit on the line, whereas Erik's solution has the advantage of wrapping onto the next line (albeit with the last line uncentred), provided you get rid of the unnecessary overflow:hidden on the UL. It's almost tempting... but any solution involving content kludges has to be frowned upon in "real" webpages.


    Quiz 3 (min-width for IE6): Yuri's approach is certainly ingenious, and revolves around the shrink-to-fit behaviour of floats whose width is 'auto'. But surely if border causes problems with really large min-widths, wouldn't you just use padding instead (as he does in his second solution) rather than going overboard with nesting?

    (Incidentally, in Yuri's border solution, the position:relative on .minwidth and the z-index on both .minwidth and .container are unnecessary, although the postion:relative on .container is required as usual when pulling a child out of its parent's content area. In his padding solution, the middle .ie6minwidth2 div is not ordinarily necessary but was required here because he forgot to fix the IE6 double float margin bug on .ie6minwidth3 through the use of float:left; _display:inline;.)

    However, alas, this float approach is not quite correct (whether using border or padding), as easily demonstrated using Yuri's border solution and placing a coloured background on the .container. Because of the slightly broken implementation of shrink-to-fit in IE6/7, the .container does not in general occupy the full width of the viewport (or the full 960px min-width for narrow viewports); instead, it shrinks a little bit too much to ensure that the right content edge is flush with the text content. It looks ok in Paul's solution — but that's just because the layout is centred so that the discrepancy is masked.

    Moreover, the float approach seems rather convoluted given that IE6 already supports a kind of min-width as we know and <del>love</del><ins>hate</ins>: if you want min-width:something together with width:auto, just use width:something for IE6. The element is then hasLayout and will expand to enclose its oversize content rather than permit overflow (in violation of CSS 2.1), in a manner akin to min-width. This isn't enough for this quiz though, because we want a real min-width including the possibility of setting a distinct width (eg width:90%; min-width:500px). But building on what we have, a more "natural" solution to the quiz is simply to give the element the required width and place inside it an empty child "prop" element of width:something which will forcefully widen the parent if it would otherwise be too narrow. Now, the height of an empty hasLayout element is equal to the line-height rather than being zero as one might expect, which gives us unwanted space at the top of the parent; but this is easily overcome by forcing the prop to have zero height: set height:0; overflow:hidden;. This gives us a genuine replacement for min-width, irrespective of font-size.


    Quiz 1 (width-dependent clipping): the most interesting of the quizzes, with some neat CSS 2.1 behind the solution, as demonstrated by Paul and Erik. The theory is to have a viewport-width, fixed-min-width, overflow-hidden wrapper holding a fixed-width, horizontally centred container from which the "adverts" are pulled outside (applying position:relative for IE6/7 as usual for pull-outs).

    [Erik: beware those position:absolute advert columns! They've forced you to add a few unnecessary heavyweight styles to the mix, and yet you still can't scroll the viewport vertically to reach their bottom extent if they are taller than the viewport. Better to make them floated siblings of the (floated) main content and pull them to either side of the main content using negative margins, irrespective of whether you restrict the technique to the adverts alone (as Paul did) or apply it to the page container. Note that Paul shifted them using position:relative instead, but that only works if the main content is wide enough to allow both adverts to naturally sit side-by-side in their wrapper.]

    However, centred layouts are the easy part! Harder is left-aligned layouts. Here we need to float the main content leftwards and then apply the horizontal prop idea from Quiz 3 to all browsers: this sibling prop keeps the main content away from the left viewport edge to force space for the left advert, but has less and less of an effect as the viewport is narrowed until it has no effect at all when the viewport is narrower than the main content (an effect achieved using a combination of width and max-width on the prop). The prop can be implemented via CSS alone using generated content in browsers with excellent CSS 2.1 support, whereas other browsers (such as IE6/7, Firefox<=3) need a physical prop element. And of course, to work in IE6 the technique requires a working combination of width and max-width which I believe can only be achieved through the use of scripting. [In my code below I've used coloured borders on the .inner div instead of having separate advert divs, to demonstrate the concept as minimally as possible.]

    Code HTML4Strict:
    <!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>Width-dependent clipping</title>
    	<style type="text/css">
    html,
    body {
    	margin: 0;
    	padding: 0;
    }
    .holder {
    	background-color: red;
    	overflow: hidden; /* Note that IE6 doesn't need hasLayout (which overflow:hidden provides to IE7), but nor would it cause any trouble */
    	min-width: 500px; /* Don't attempt to hack min-width for IE6 here; The width on .outer forces the min-width anyway due to IE6 width expansion */
    }
    .outer {
    	background-color: yellow;
    	margin: 0 auto;
    	width: 500px;
    }
    .inner {
    	background-color: blue;
    	_position: relative;
    	border: 0 solid green;
    	border-width: 0 200px;
    	margin-left: -200px;
    	_margin-right: -200px; /* Counteract IE6 width expansion */
    	width: 500px;
    }
     
    .holder2,
    .holder3 {
    	margin-top: 100px;
    }
    .holder3 {
    	_zoom: 1;
    }
    .holder2 .outer,
    .holder3 .outer {
    	margin: 0;
    	float: left; _display: inline;
    }
    .holder2:before {
    	content: "";
    	background: pink;
    	float: left; _display: inline;
    	margin-left: -500px;
    	width: 100%;
    	max-width: 700px;
    	height: 20px;
    }
    .holder3 .prop {
    	background: pink;
    	float: left; _display: inline;
    	margin-left: -500px;
    	width: 100%;
    	max-width: 700px;
    	_width: 200px;
    	_width: expression(document.body.clientWidth > 700 ? "700px" : (document.body.clientWidth < 0 ? "0px" : "100%"));
    	height: 20px;
    }
    	</style>
    </head>
     
    <body>
     
    <h1>Cross-browser width-dependent clipping</h1>
     
    <div class="holder">
    	<div class="outer">
    		<div class="inner">
    			Horizontally-centred layout requires two wrappers (probably BODY and one div are sufficient).  WARNING: overflow:hidden carries danger for narrow layouts or large font sizes.
    		</div>
    	</div>
    </div>
     
    <div class="holder holder2">
    	<div class="outer">
    		<div class="inner">
    			Left-centred layout requires two wrappers (probably BODY and one div are sufficient).  Works in Fx>=3.1, Opera, IE8.  WARNING: overflow:hidden carries danger for narrow layouts or large font sizes.
    		</div>
    	</div>
    </div>
     
    <div class="holder holder3">
    	<div class="prop"></div>
    	<div class="outer">
    		<div class="inner">
    			Left-centred layout requires two wrappers (probably BODY and one div are sufficient).  Works in Fx<=3.0 and IE7 using a floated horizontal prop in place of generated content.  To work in IE6 it requires a working combination of width and max-width which I believe can only be achieved through the use of scripting.  WARNING: overflow:hidden carries danger for narrow layouts or large font sizes.
    		</div>
    	</div>
    </div>
     
    </body>
    </html>

    Several interesting questions arise from this. In the left-aligned layout, the right advert disappears first, followed by the left advert; whereas in the centred layout both adverts disappear simultaneously. Is there a way of changing the order of disappearance? What about right-aligned layouts? (My guess is "no"… except perhaps for the right-aligned mirror image of the left-aligned layout, and even then it's possibly not achievable given that right and left [and top and bottom] are not equivalent due to how browsers will try to scroll to right/bottom content.)

    Of course, in reality, you shouldn't use any width-dependent clipping technique for adverts, or any other useful content. Since (of course!) we'd only ever place adverts that our readers would be interested in, they'd be very frustrated if this content was clipped and unreachable. The technique does have its place though, such as for viewport-width overlay strips or wide main images whose horizontal extremes are nice to have on wide viewports but unimportant for narrow viewports.

    [And, as always, treat any use of overflow:hidden with extreme caution! Are you really sure that your main content is not going to overflow and get clipped at large font sizes?]

  21. #46
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anton P, very interesting views!

    About my solutions I would like to comment:
    Quiz 2 (equal Spread):
    ...
    He then added a few "cosmetic" extra &nbsp;s/x's: one at the start of the first LI and another at the end of the last LI to push their real text away from the sides; and one at the start of each other LI to ensure that the spacing between the LIs is greater than the spacing at the start and end of the line, which looks better. (Note, however, that it's not at all clear that browsers should treat &nbsp;s as "fixed"-width characters; after all, they're defined to be non-breaking, not non-stretching. It would be unwise to rely unconditionally on the "distribution" behaviour that we see in the well-known browsers!)
    ...
    As you say, they were "cosmetic" and only added to equally space the items when some were commented out for testing, and to finally center the last item left.

    In real life I would give ending space to the items at the list ends by e.g. a fluid padding on the list.

    Quiz 3 (min-width for IE6):
    ...
    Moreover, the float approach seems rather convoluted given that IE6 already supports a kind of min-width as we know and <del>love</del><ins>hate</ins>: if you want min-width:something together with width:auto, just use width:something for IE6. The element is then hasLayout and will expand to enclose its oversize content rather than permit overflow (in violation of CSS 2.1), in a manner akin to min-width. This isn't enough for this quiz though, because we want a real min-width including the possibility of setting a distinct width (eg width:90&#37;; min-width:500px). But building on what we have, a more "natural" solution to the quiz is simply to give the element the required width and place inside it an empty child "prop" element of width:something which will forcefully widen the parent if it would otherwise be too narrow. Now, the height of an empty hasLayout element is equal to the line-height rather than being zero as one might expect, which gives us unwanted space at the top of the parent; but this is easily overcome by forcing the prop to have zero height: set height:0; overflow:hidden;. This gives us a genuine replacement for min-width, irrespective of font-size.
    If I understand you right here, an extra div placed as sibling to the content would give the container that minimum width.

    If I understand IE behavior right, it is letting the overflow grow its container only to display the overflow, while other e.g. floated content still is restricted to the container's original fluid width.

    So I think in this caes if you use a content sibling to push the container wider than the viewport width, still the content could (depending of its nature) be restricted to the viewport and wrap fluid at viewport edge, while its container stays wide with an empty scroll.


    Quiz 1
    ...
    [Erik: beware those position:absolute advert columns! They've forced you to add a few unnecessary heavyweight styles to the mix, and yet you still can't scroll the viewport vertically to reach their bottom extent if they are taller than the viewport.
    ...
    ]
    My interpretation of Paul's attachment was that the ads should be clipped outside the content scroll. As you also noted, he hinted the solution could be used for an overlay of images to merge with background and not induce extra scrolling
    Happy ADD/ADHD with Asperger's

  22. #47
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thanks for the good read Anton P
    nice review


    p.s.
    If I understand you right here, an extra div placed as sibling to the content would give the container that minimum width.
    and you answered it yourself. :P
    still the content could (depending of its nature) be restricted to the viewport and wrap fluid at viewport edge, while its container stays wide with an empty scroll.

    putting a sibling of specific width inside the content box to have that content box not shrink below that size in ie6, will not do the trick completely,
    it will simply create a scrollbar, but will not stop the content in the container from shrinking in any way.




    if you want min-width:something together with width:auto, just use width:something for IE6.
    needs to expand depending on the exterior, not interior (expands with window, not on contents).

    min-width can mean min-width in terms of growing and shrinking! xD

    p.p.s
    hardest quizzes yet.

  23. #48
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Erik J View Post
    If I understand IE behavior right, it is letting the overflow grow its container only to display the overflow, while other e.g. floated content still is restricted to the container's original fluid width.
    You're absolutely right of course! I'd forgotten all about that behaviour. How embarrassing: I must spend too much time with abstract test-cases, because I didn't think to actually put some real content in ;-)

    Quote Originally Posted by YuriKolovsky View Post
    if you want min-width:something together with width:auto, just use width:something for IE6.
    needs to expand depending on the exterior, not interior (expands with window, not on contents).
    Indeed! You've both got me thinking about why I don't usually run into this particular non-equivalence of min-width and _width. I think it's because I don't actually use min-width much on containers of free content. (I tend to be more concerned about max-width I want variable-width columns, to ensure that the line boxes don't get too wide.) I would appear to use min-width in very limited situations such as on buttons that I want to ensure are at least wide enough for their full background image to show (and I've just verified that button text does force the button to expand if the specified _width is too narrow, so I don't run into the problem in that particular case).

    Apologies for my misinformation regarding this min-width exercise.
    Last edited by Anton P; Jun 28, 2009 at 14:41.

  24. #49
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quiz 1 works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type

  25. #50
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quiz 1 works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type
    I submitted a corrected version the day after. (Post #12).
    Happy ADD/ADHD with Asperger'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
  •