SitePoint Sponsor

User Tag List

Results 1 to 25 of 44

Threaded View

  1. #1
    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)

    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


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
  •