SitePoint Sponsor

User Tag List

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

    CSS - Test Your CSS Skills Number 25

    CSS - Test Your CSS Skills Number 25 : Quiz closed - solutions posted in post #26

    As we didn't get a lot of entries for the last quiz this week we are going with a nice simple little quiz that can be done easily in your coffee break and gives all abilities a chance to have a go.

    Look at the attachment called cross.png.

    It is just a simple cross shaped container that holds some text as required. The text can be any length and the container can grow as in the screenshot.

    The main rules for this quiz are that no absolute positioning is to be used and it must work in IE6 and IE7 as they are the ones that will exhibit some bugs that you need to squash. (It should also work in all other browsers anyway.)

    I will supply the html which cannot be touched but you can add your own css as required. I have a added a conditional comments so that you can target IE.

    Here is the html to use:

    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">
    div{width:300px}
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    Remember it must work in IE6 and IE7 and the text can be any length without needing to change the CSS at all.

    Bonus points will be awarded if innovative solutions are found but the code for this is relatively simple so points will be awarded for concise code also.

    As I already said this is an easy task so some of you that have just been watching should dive in and have a go. The more advanced of you can think of more convoluted answers to this as long as it meets the criteria already stated.

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers. (
    You must make sure that it works before you send it to me )

    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
    Attached Images Attached Images
    Last edited by Paul O'B; Jul 18, 2009 at 06:07.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm in.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    My solution is in your inbox, it works in all my browsers without any CC's needed for IE.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Wow that was quick

    Ray your solution works great and was the first I received.

    I also have a solution a split second later from Raffles which also works well.

    Ryan also has sent a solution at the same time but it just needs one little tweak which I'm sure will be fixed any second now.

    Well done to all so far.

    Let's see if there are any different ways to do this as all entries so far are basically the same?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    My solution is in your inbox, with two hacks.
    Edit:

    The rectified one


    Edit:

    I wasn't sure I was gonna be able to rectify the little mistake lolz. Very hard quiz and thanks for it! But now I have nothing to do all week .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Ryan - That did it and it works fine now

    Raffles has suggested that perhaps the text could be co-erced into flowing into the top and the sides but I think that it is impossible for the bottom part of the cross but if anyone wants to try feel free (the html would need to be changed for this though).

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Just before anyone suggests a solution to having the text flowing everywhere, I know it could be done with a method like Slantastic with loads of extra markup. I was thinking of doing this by adding a maximum of 3 extra HTML elements per cross, but it seems to be impossible for the bottom part of the cross.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    looks fascinating!
    i have no idea how to make xD

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have another correct entry from Gary Turner which works great also

    Well done to all so far.

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    oh, this is easy!!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    oh, this is easy!!
    That was the idea

    I was trying to get more people to have a go.

    All answers so far have been roughly the same so maybe you can come up with something different

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    my solution sent, i have no idea what the other solutions are, but mine is good enough i think.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    my solution sent, i have no idea what the other solutions are, but mine is good enough i think.
    Thanks that works well

    It's similar to other solutions yet somehow different

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Version #2 submitted, it may have already been done by others but it is a little leaner than my first version.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes Ray that is slightly different to the others - well done

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you want to make things harder and have some fun then reduce the html by one div as follows:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        width:300px
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    I haven't been able to reproduce the original design but I have come up with some interesting shapes using minimal mark up.

    Have a look at the attachment to this post and see if you can come up with something more interesting just using the html provided. This isn't part of the quiz so just post a screenshot of what you have created.
    Attached Images Attached Images

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Lol I don't have time to make all those shapes! I have a life (or at least that's waht I tell myself )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you'll find it's pretty simple once you know what the trick is, Ryan! Once you have the first one the others require little modification.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Raffles the trick isn't the problem. I got that..It's just differnet colors and different values (wtih my version). I was just commenting on Pauls many many shapes lol.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    some interesting shapes there, i can recreate all of em :P
    the one i like the most is the 5th one.

    if only it was possible to make those corners round.... in ie....

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want to make things harder and have some fun then reduce the html by one div as follows:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        width:300px
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    I haven't been able to reproduce the original design
    1 less div solution is in your inbox.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I can reduce the HTML to just the <p> if you don't care about the background color of the page, do you?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi again, I have a solution in your inbox, using one element, working in Opera, Chrome, Safari, and IE8.

    Edit:

    Those browsers look exactly like the SS, background color and all.

    FF is almost working buut the background color is extending a bit further then I like.

    IE6/7 fail
    Last edited by RyanReese; Jul 16, 2009 at 16:08.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks good Ryan

    I'll post all the solutions tomorrow afternoon.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks

    Paul got it working in FF by using a slightly different method, but I'm afraid IE6/7 are impossible to work with due to the element (in IE) ignoring the declarations set on it and expanding to fit. Even setting max-width:50px; on it, it still expands in IE7....many of the reasons we have to use a wrapping div still.

    *Shrugs* I really wanted to get this working in those browsers.

    I'm excited for the solutions .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •