SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 26

    CSS - Test Your CSS Skills Number 26 : Quiz now ended - solutions in post #20

    Here is another short quiz (code wise) that can be in two parts due to browser differences. The task this week is similar to the age old image and caption question where following caption text should wrap at the limits of the image and not push wider than the image.

    However, I have changed this slightly and the task is to have some heading text that will dictate the width of the box and then the following text should wrap at the limits of the heading.

    All will be clear if you look at the attached screenshot "headers.png".

    As you can see the header could be one word or ten words and the resulting box is always the width of the header and the text wraps nicely within that box.

    You can't just set a different width for each box as the header could be one word or ten words and the same code must work for all boxes.

    Part one of the quiz is to make it work for IE8, Firefox 2.0+, Safari 3 and opera 9.2+. The result should be usable in a real life situation and could fit anywhere into an existing page without causing problems.

    The second part of the quiz is to get something to work in IE7 and as you can see from the screenshot I have a working example. However the layout in IE7 wouldn't really be useful in real life for a number of reasons but it's a good test all the same. The same rules applies and you cannot approximate the widths of each box because it should work on any variable length header.

    Here is the html to use and you cannot change the html in the body but you can of course use whatever css you like.
    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">
    
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    As usual there is no scripting allowed and no IE expressions etc. You can use the conditional comments for IE7 only of course. (I was unable to get this to work in IE6 so if you want to be one up on me then make it work there also but I dont think it's possible.)

    I am away on holiday from the 3rd - 12th August
    so please PM your answers to Erik J
    and do not post your answers in this thread so that others can have a go without seeing your answers. (You must make sure that it works before you send the PM )

    Edit:


    Note that Erik can't test FF2 or safari3 but if your design works in FF3 and Safari4 it is also likely to work in the other two also.



    Any questions or if anything is unclear just ask and remember this is just for fun

    Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    test 20 test 21: test 22:test 23 :test 24 : test 25
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Solution in your inbox.
    Edit:

    Didn't really see why you didn't think IE7 would play ball easily...I got it working with like 2 propertiees..I'm close to cracking IE6
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ill look at it tomorrow

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Solution in your inbox.
    Edit:

    Didn't really see why you didn't think IE7 would play ball easily...I got it working with like 2 propertiees..I'm close to cracking IE6
    Yes the solution you sent is a valid solution for part 2 (IE7 only) of the quiz so well done. Of course the solution is totally unusable in a real situation (just narrow the window on your solution to see why ).

    The solution for other browsers will not overlap or interfere with anything else so you still need to solve Part 1 of the quiz.

  5. #5
    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)
    We have a solution from Rayzur that is working according to both part 1 in good browsers and part 2 in IE7. Well done!
    Happy ADD/ADHD with Asperger's

  6. #6
    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)
    YuriKolovsky have come up with a quite different solution for part 1 that works in all good browsers. Very well done.
    Happy ADD/ADHD with Asperger's

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Did quiz 1, with degradability (crappy though) for IE6/7
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    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)
    RyanReese have come up with a similar solution as YuriKolovsky. It is very close working in good browsers as for part 1. Good work so far.
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done my best in the boundaries of worry free work.

  10. #10
    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)
    Ryan has fixed the little glitch. It is working for part 1.
    Happy ADD/ADHD with Asperger's

  11. #11
    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)
    Eric Watson has a solution that is working for part 1 and part 2 as expected. Well done!

    In addition he serves an expression to IE6, getting it to work in IE6 like it does in IE7.
    Happy ADD/ADHD with Asperger's

  12. #12
    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)
    Quote Originally Posted by antitoxic View Post
    I've done my best in the boundaries of worry free work.
    Your code is fully working for part 1, as you intended.

    Thank you, well done!
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Totally stumped. I'm excited to see the solution.

    I'm not sure how to even get going without using defined widths. Any resources someone could refer me to? I'm sure I'm way off track...

    By the way, Paul, thanks for doing these. I've been going over them and have been learning a lot about the under-the-hood css workings. Good stuff.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by candlebain View Post
    Totally stumped. I'm excited to see the solution.

    I'm not sure how to even get going without using defined widths. Any resources someone could refer me to? I'm sure I'm way off track...

    By the way, Paul, thanks for doing these. I've been going over them and have been learning a lot about the under-the-hood css workings. Good stuff.
    I doubt there are any resources on this matter..you gottta play with it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    im with you candlebain.
    i love these quizzes too, for their creative and amazing and mostly useful real world application, and they are the only things that actually help me expand my knowledge of css.

    but as paul knows css very very well and has experimented with it for a long time, he creates these things mostly by himself, especially if the whole internet claims something is impossible with css, paul makes it his job to figure out how it could be done (and nowadays i do too but to a smaller extent),
    or maybe he just stumbled upon something rare in css, and decided to make it into a quiz.

    this explains the lack of online references for most of these quizzes.

    the point here is to figure it out on your own, possibly creating a new method no one has thought of.

  16. #16
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...agreed...and regardless of my inability to answer most of these, I'm still in it for the long haul. I look forward to seeing how this one works.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hey - I'm back - I'll check with Erik and get the entries and results posted asap.

  18. #18
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thats good.
    hoping to see the results, too bad theres still no real ie6 solution.

  19. #19
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing this has something to do with inline-block but just can't crack it. Look forward to your Solutions/explanations post Paul!

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

    Thanks for all the entries and after sifting through them I have decided that the winner this week is Rayzur as it was the first entry to satisfy both parts of the quiz.

    Well done Ray

    I would also like to say well done to Yurikolovsky and Ryan for the different approach to the first part of the quiz.

    Eric Watson also solved both parts correctly and finally antitoxic solved part one of the quiz.

    Well done to all.

    The concept of the quiz is based on an old table trick where you can have a caption under an image and the caption only stretches as far as the image. Here is an old demo of the technique which shows that the effect is easily accomplished using a table but setting the width to only 1px.

    A table will expand if pushed and the 1px width will always stretch to accommodate the fixed width content.

    To do this for good browsers using CSS we can simply take the same approach and use display:table and set the element to width:1px and the effect is achieved straight away.

    If you look at an old demo of mine you will see the techniques in place (and an expression fix for ie6/7 added in also).

    As the method only works with browsers that understand display:table then IE7 doesn't get to play ball and part 2 of the quiz was to get something similar for IE7 although as I mentioned it didn't have to be a fully usable solution.

    The solution for IE7 was to place the text under the heading absolutely and use left and right co-ordinates based on the parent's width to keep the text within the confines of the header's width.

    This works well until you close the window and then the absolute elements will fall on top of other elements so isn't a real world solution unless you have a fixed height to work with and keep the absolute elements controlled.

    Here is my original solution which needs very little code to accomplish the effect.

    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">
    div {
        padding:5px;
        margin:15px 10px;
        border:1px solid #000;
        background:#809900;
        color:#fffccc;
        font-weight:bold;
        width:1px;
        display:table;
        min-height:0;
        position:relative;
        z-index:1;
        float:left;
    }
    div h2 {
        white-space:nowrap
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    div p {
        position:absolute;
        width:auto;
        left:-1px;
        right:-1px;
        margin-top:-1px;
        background:#809900;
        border:1px solid #000;
        border-top:none;
        z-index:2;
        padding:5px;
    }
    div {
        width:auto
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    The white-space:nowrap on the h2 is another key part of the puzzle as this forces the text not to wrap and therefore allows the heading to push the container wide without wrapping to another line.

    SOLUTIONS

    Rays 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>Rayzur-Quiz#26</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    div {
        display:table;
        width:1px;
        float:left;
        padding:5px;
        margin:15px 10px;
        background:#99C;
        border:1px solid #000;
        color:#000;
        font-weight:bold;
    }
    h2 {
        white-space:nowrap;
        background:#66C;
        height:50px;
        line-height:50px;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    div {
        width:auto;
        position:relative;
    }
    p{
        position:absolute;
        padding:0 5px 5px;
        top:55px;
        left:-1px;
        right:-1px;
        background:#99C;
        border:1px solid #000;
        border-top:0;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    Yurikolovskys solution - quiz part 1 only:
    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>Header width - CSS Quiz 26 - YuriKolovsky - part 1</title>
    <style type="text/css">
    body {
    }
    div {
        background:#809900;
        color:#ffffcc;
        border:solid #000 1px;
        margin:10px;
        padding:7px;
    }
    div {
        float:left;
        position:relative;
    }
    h2 {
        white-space:nowrap;
    }
    p {
        display:block;
        margin-right:-3000px;/*longer than content*/
        width:100%;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    Ryan - Part 2 of quiz only:
    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">
    * {
        margin:0;
        padding:0;
    }
    div {
        float:left;
        margin-left:10px;
        display:inline;
        position:relative;
    }
    h2 {
        background:lightgreen;
        position:relative;
    }
    p {
        position:absolute;
        background:lightgreen;
        word-wrap:break-word;
        width:100%;
        overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : </p>
    </div>
    <div>
        <h2>This is a small</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : </p>
    </div>
    <div>
        <h2>This is a small heading MORE MORE MORE MORE</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : This is the text text will wrap at the end of the heading : This is the text text 
            
            will wrap at the end of the heading : This is the text text will wrap at the end of the 
            
            heading : </p>
    </div>
    </body>
    </html>
    Ryan - Part 1 of Quiz only:
    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">
    div {
        float:left;/*shrink wrap*/
        background:lightgreen;/*background*/
        margin:10px;
    }
    p {
        margin-right:-999em;/*remove from flow and does magic*/
        text-align:justify;/*pretty*/
        width:100%;/*take up 100% of the width of the div*/
    }
    h2{white-space:nowrap}
    * html div {
        overflow:auto;/*degrade for IE6. Still gets text*/
    }
    *+html div {
        overflow:auto;/*degrade for IE6. Still gets text*/
    }
    </style>
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    
    </body>
    </html>
    Erik Watson - both parts of quiz and an expression for ie6

    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">
    div {
        margin:10px;
        padding:5px;
        border:1px solid #000;
        background:green;
        width:1px;
        display:table;
        float:left;
    }
    h2 {
        white-space:nowrap;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    div {
    width:auto;
    border-bottom:0;
    position:relative;
    }
    p {
    position:absolute;
    left:-1px;
    right:-1px;
    padding:5px 5px 15px 5px;
    background:green;
    border:1px solid #000;
    border-width:0 1px 1px 1px;
    }
    * html p {
    width:expression(this.parentNode.offsetWidth-12);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    Antitoxic - part one of quiz:
    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">
    div {
        display:table;
        float:left;
        width:1em;
        /*decoration*/
    margin-right:2em;
        background:#090;
    }
    div h2 {
        white-space:nowrap;
    }
    </style>
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    Hope you had some fun and learned something along the way. These techniques can prove useful and if you refer to one of my old demos you can see them all in use.

    Look out for the next quiz in a week's time

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    thats good.
    hoping to see the results, too bad theres still no real ie6 solution.
    With one little expression hack you can turn ie6 and ie7 into a fully working example. The code is actually simpler than before as well.

    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">
    div {
        padding:5px;
        margin:15px 10px;
        border:1px solid #000;
        background:#809900;
        color:#fffccc;
        font-weight:bold;
        width:1%;
        display:table;
        min-height:0;
        position:relative;
        z-index:1;
        float:left;
    }
    div h2 {
        white-space:nowrap
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    div{width:auto;}
    p{width:1%}
    p{width:expression(this.parentNode.offsetWidth-12);}
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>

  22. #22
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm surprised no one used {display: inline-table;}; no need for float.

    I'll 'fess that I didn't even come close on IE<8. The first part was trivial, which made not solving IE even more frustrating.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gary
    I'm surprised no one used {display: inline-table;}; no need for float.
    Good thinking

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i personally dislike expressions, simply because they are very cpu demanding, and the pc's that have ie6 installed are usually very slow :/

    expressions analyze every part that it targets all the time, it does this every time the mouse moves, the screen resizes, or anything happens on the page.
    some js parts on some of my websites are relatively demanding and cause enough cpu usage already.

    im definitely a performance maniac, to even think about this, so i have read this book here (page 51),
    it shows some very nice expressions + javascript alternatives that will make the performance of expressions much better. (even if they do only take milliseconds)

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes of course expressions are slow and should be converted to external js if speed is an issue. For the demos the expressions work fine but in a busy site they should be converted to js and just called for IE via conditional comments to save other browsers being bothered.

    I'm very poor at JS but I guess something like this would do the trick.
    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">
    #demo div {
        padding:5px;
        margin:15px 10px;
        border:1px solid #000;
        background:#809900;
        color:#fffccc;
        font-weight:bold;
        width:1&#37;;
        display:table;
        min-height:0;
        position:relative;
        z-index:1;
        float:left;
    }
    #demo div h2 {
        white-space:nowrap
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    #demo div{width:auto;}
    p{width:1%}
    </style>
    <![endif]-->
    <!--[if lte IE 7]>
    <script type="text/javascript">
    fixwidth = function() {
            if (document.getElementById) {
            var el = document.getElementById('demo');
            var items = el.getElementsByTagName('p');
                for (i=0; i < items.length; i++) {
                items[i].style.width = items[i].parentNode.offsetWidth-12; 
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", fixwidth);
    </script>
    <![endif]-->
    
    </head>
    <body>
    <div id="demo">
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </div>
    </body>
    </html>


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
  •