SitePoint Sponsor

User Tag List

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

    Test your CSS skills #7

    Hi,

    Just in time for some festive fun I have revived this little quiz for a simple one-off test that i hope you find interesting and maybe challenging.

    Some of you will know the answer to this straight away so please PM me your answer and do not post in the thread and spoil it for others. There are no prizes but I will announce the first correct entries that I receive to give you some self-smug congratulations at least.

    The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions. All I want you to do is to place the image supplied 50px inside the right edge of a container using only the html that I supply. (I will also supply minimal css that must remain in effect.)

    You cannot alter the html and you can only use valid css2.1 to achieve the result (no javascript or browser tricks just valid css2.1). Although it sounds simple you are not allowed either to put the image in your paint package and add 50px padding to it. The container that this image is placed in is a fluid width so you can't place it xxpx from the left to move it into position. Therefore you can't place it at xx% either as that will change when the window is resized.

    To make it easier I only need the example to work in Firefox and Opera (recent versions) but it must work in both with the same code. (If you can find a solution that also works in IE 6 or 7 then that will be bonus points but I couldn't find a reliable solution to this.)

    To recap just place an image 50px from the right side of the container (p tag) using css only and no change to the image or html is allowed.

    Here is a screenshot of what I want:

    And here is the same page resized smaller to show that the image is still in place.

    And here is the image to use:

    This is the html you must use along with the minimum css to create the container.

    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}
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    You can add as much css as you like but you must keep the container a percentage width block level element. The html cannot be changed or added to at all and all your changes must occur in the css (within the style tags) and be valid css2.1

    General Rules:
    No frames or iframes
    No javascript or scripting of any kind
    No image alteration
    No expression,conditional comments, behaviours etc.
    Use Valid CSS 2.1
    Use Valid xhtml
    Must work in Firefox and Opera
    No hacks
    No finding loopholes - I'm sure you all know what I mean lol

    As usual there are no prizes other than the self-satisfaction of completing this. If you have a the answer then post a message here but PM me the solution so that other people can still have a go. I will post the winners and their solutions later.

    As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.

    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:

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

    I've just had a couple of relies but it seems I wasn't clear enough in the description above.

    You are not allowed to change the html at all. The only change you can make will be inside the css style tags to add your valid css code.

    The html will still look like this when you have finished.

    Code:
    <body>
    <p></p>
    </body>
    Thanks to the people that tried anyway

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

    We have a winner already and Deathshadow has provided 2 working examples that fulfil all the criteria of the test.

    I won't post the answer yet to give others a try at doing this but well done to Deathshadow

    It looks like next time I'll have to think of something harder as we have some clever people on the forums these days

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It looks like next time I'll have to think of something harder as we have some clever people on the forums these days
    Well, it's not exactly a solution most people would even think of - much less use since there is, as you mentioned in the requirements, zero support for it in IE. It was actually that one line that gave away the answer for me.

    Though I'm wondering if a htc could get around that, but that breaks the rules.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow
    Though I'm wondering if a htc could get around that, but that breaks the rules.
    Well yes it breaks the rules for the demo but however if you get a working example going for IE then I will post it with the other answers as I'm sure it will be of interest to others.

    many thanks

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And to think I just found out about this thread... bummer too.

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured out a .htc version too - that only requires the .htc to 'enable' IE, just as the csshover.htc 'fixes' :hover, :active and/or :focus

    Not too hard to do, but definately a learning experience since I've never written a .htc before... (apparantly it's just a fancy wrapped javascript - ooooh) just because I don't advocate using browser specific stuff, doesn't mean I don't know how

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    My solution is in, i'm just hoping what I see as 'lateral thinking' doesn't violate 'No finding loopholes - I'm sure you all know what I mean lol'

  9. #9
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Maujor's solution

    My solution was sent.
    Mauricio Samy Silva
    http://www.maujor.com/

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by samy
    My solution was sent.
    Hasn't arrived yet Samy but sometimes these PM's seem to get delayed for a while.

    Quote Originally Posted by dan
    And to think I just found out about this thread
    I'll still keep the answers secret for a while if you want to have a go at this

    Quote Originally Posted by mark
    i'm just hoping what I see as 'lateral thinking' doesn't violate 'No finding loopholes
    lol - You did find a loophole but that was my fault for not being specific enough Mind you that's half the fun of this to see the different approaches people take.

    So far I have correct entries from:

    Deathshadow (2 versions)
    Kravvitz
    Markbrown4 (loophole version )

    If I have missed anyone then let me know.

  11. #11
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hasn't arrived yet Samy but sometimes these PM's seem to get delayed for a while.
    Sent again. Now to the email address i've found on your site.
    Mauricio Samy Silva
    http://www.maujor.com/

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok - Got it now Samy and yes you have a correct solution also so well done

    Its more or less what I had in mind and similar to the other entries although you have all managed to find slighly different ways of doing it.

    Good work.

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ok, a solution in now without the loophole

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes you got it this time mark

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'll Post all the correct solutions I've received on Wednesday.

  16. #16
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Good contest - can't find an exact solution though and I am looking forward to seeing the winning code.

    This is my (loose) solution which may be of interest - works in all browsers on OSX
    Code:
    removed - sorry, should have PM'd.
    Let me know if you haven't receive the PM yet
    I just put the <a> tag and corresponding CSS in to track the position of the GIF while resizing...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  17. #17
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul.
    Where did you get that micrometer widget?
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

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

    Thanks to all those who took part and it's time to post the winners and their solutions

    First of all here is a link to my original example.

    And here is the code:
    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>Quiz 7 answer</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
    margin:50px auto;
    width:50&#37;;
    height:200px;
    border:1px solid red;
    padding:25px 50px 0 0;
    text-align:right;
    }
    p:after{ content:url(images/arrowpoint.gif); }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    The idea is to use the pseudo class after and then place the image using the content property. Some padding is added to the p tag and then the text is aligned right which puts the image exactly where we want it.

    Most of the solutions provided used similar (after: or before methods with slight variations to get the image into position.

    However, none of the (non-loophole) solutions worked in IE so I thought I'd share a method which was going to be the original example of mine but I didn't like the fact that it was a litle bit of a hack although it uses no hacks.

    Solution 2 (also works in IE as well as Firefox and Opera)

    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>Quiz 7 answer</title>
    <style type="text/css">
    html{    direction: rtl;}/* change page direction*/
    * {margin:0;padding:0}
    p {
     display:list-item;
     list-style:inside url(images/arrowpoint.gif);
     margin:50px auto;
     width:50%;
     height:200px;
     border:1px solid red;
     padding:50px;
     position:relative;
     left:60px;/* for ie*/
    }
    p:before {    content:" ";}/* for opera*/
    </style>
    
    </head>
    
    <body>
    <p></p>
    </body>
    </html>
    This solution is a bit more radical and involves changing the page from left to right to right to left instead by apply direction:rtl to the html element. This basically makes text flow from right to left instead of left to right as normal.

    Although background images are sill unaffected by this and will stay at their original positions the rtl does affect the bullets in lists and puts them on the right. Therefore we can assign a list image instead of a bullet and place it at 50px from the right edge.

    The p tag isn't a list but we can turn it into a list using display:list-item and that will also allows us to apply a list image to it as well. There are a couple of other little bugs to cure but that's about it.

    Members Solutions:

    Winner: Deathshadow (3 examples)

    The rest follow in order that received the entries:

    Kravvitz
    markbrown4
    maujor
    zcorpan
    ronw
    caryD

    Well done to all the above and If I've missed anyone then let me know and I will add you in the list

    Now follows each persons entry and it should make sense if you have read the before: and after: pseudo class specs that I linked to above.


    Deathshadow:

    1)
    (Interesting negative margin example)
    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>Deathshadow 1</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    
    p:before {
        display:block;
        height:12px;
        line-height:12px;
        margin:0px 0px -12px -62px;
        padding-left:100%;
        content:url(arrowpoint.gif);
    }
    
    </style>
    </head>
    
    <body>
    <p></p>
    </body>
    </html>
    2) another version
    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>Deathshadow 2</title>
    <style type="text/css">
    
    * {
        margin:0;
        padding:0;
    }
    
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    
    p:before {
        display:block;
        margin-right:50px;
        height:12px;
        line-height:12px;
        margin-bottom:-12px;
        content: " ";
        background:url(images/arrowpoint.gif) bottom right no-repeat;
    }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    3)Third example of deathshadows is a work-a-round for IE using ie's proprietary behaviours to call an htc file to give ie the same functionality as the pseudo class. Although this was outside the scope of the demo I think its worthwhile to post the answer anyway as it is quite interesting.

    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>Death Shadow 3</title>
    <style type="text/css">
    
    * {
        margin:0;
        padding:0;
    }
    
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    
    p:before {
        display:block;
        margin-right:50px;
        height:12px;
        font-size:1px;
        line-height:12px;
        margin-bottom:-12px;
        content:" ";
        background:url(images/arrowpoint.gif) bottom right no-repeat;
    }
    </style>
    <!--[if IE]>
    <style type="text/css" media="screen">
    body {
        behavior:url(parse_p.htc);
    } 
    </style>
    <![endif] -->
    </head>
    <body>
    <p></p>
    </body>
    </html>

    htc file:
    Code:
    <attach event="ondocumentready" handler="parseP" />
    <script>
    function parseP() {
        var sheets=window.document.styleSheets;
        for (var t=0; t<sheets.length; t++) {
            var rules=sheets[t].rules;
            for (var n=0; n<rules.length; n++) {
                var rule=rules[n];
                tst=rule.selectorText.toLowerCase();
                if (tst.match(":unknown")) {
                    newname='.'+tst.replace(":unknown","_before"); 
                    sheets[t].addRule(newname,rule.style.cssText);
                }
            }
        }
    
        p_list=window.document.getElementsByTagName('p'); 
        for (t=0; t<p_list.length; t++) {
            p_list[t].insertAdjacentHTML("afterBegin",'<span class="p_before"></span>');
        }
    }
    </script>
    Kravvitz

    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>Kravvitz</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
        position: relative;
    }
    p:before {
      content: "\00A0";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      margin-top: 40px;
      margin-right: 50px;
      min-width: 14px;
      height: 14px;
      background-image: url(arrowpoint.gif);
      background-position: top right;
      background-repeat: no-repeat;
    }
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    markbrown4
    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>markbrown4</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
            margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    p:after {
        content: 'Hello';
        display: block;
        font-size: 485%;
        color: white;
        text-align: right;
        margin: 50px 50px 0 0;
        height: 100px;
        width: auto;
        background: white url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat top right;
    }
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    Mark also posted another solution which was one of the loopholes I mentioned earlier but deserves a mention because it is also thinking outside the box. This version also works in ie but doesn't really move the image to the edge of the p tags border but manipulates the body element to provide the border instead.

    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>markbrown4</title>
    <style type="text/css">
    * {margin:0;padding:0}
    html { }
    body {
            margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    p {
            margin: 50px 50px 0 0;
            height: 100px;
            background: white url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat top right;
    }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    Maujor


    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>Maujor's solution</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p { 
     margin:50px auto;
     width:50%;
     height:200px;
     border:1px solid red; 
        padding-right:50px;
    }
    p:before { 
    display: block; 
    width:100%; 
    height:35px;
    text-align:right; 
    line-height:70px;
    content: url(arrowpoint.gif) ;
        }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    ronw

    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>ronw</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
    margin:50px auto;
    width:50%;
    height:200px;
    border:1px solid red;
    text-align: right;
    }
    p:after {
        display: marker;
        content: url("images/arrowpoint.gif");
        padding: 0 50px 0 0;
        
    }
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    zcorpan

    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>zcorpan</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
        margin:50px auto;
        width:50%;
        border:1px solid red;
        height:200px;
        text-align:right;
    }
    p:after { content:url(http://www.pmob.co.uk/temp/images/arrowpoint.gif); margin-right:50px; }
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    Simon (zcorpan) also posted a loophole version similar to mark above

    Code:
    * {margin:0;padding:0}
    body {
        margin:50px auto;
        width:50%;
        border:1px solid red;
    }
    p { height:200px; margin-right:50px; background:url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat right; }
    caryD
    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>CaryD</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
     margin:50px auto;
     width:50%;
     height:200px;
     border:1px solid red;
        text-align: right;
    }
    p:before {
        content: url(images/arrowpoint.gif);
        padding-right: 50px;
    }
    
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>
    -------------------------------------------------

    Congratulations to all the above and thanks for taking part. Its obvious I will have to be even more devious in the next quiz
    Last edited by Paul O'B; Dec 27, 2006 at 10:59.

  19. #19
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rob_D View Post
    This is my (loose) solution which may be of interest - works in all browsers on OSX
    Also IE6 on XP
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A late entry form rob_d although this is another one that I would class as a loophole entry as its not quite exact and wouldn't work if the p tags width were changed unlike the examples above.

    However it was a good attempt so I will post it anyway

    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" />
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    background:url(images/arrowpoint.gif) no-repeat 75&#37; 100px;
    }
    p {
    margin:50px auto;
    width:50%;
    height:200px;
    border:1px solid red;
    padding:50px;
    }
    </style>
    </head>
    <body>
    <p></p>
    </body>
    </html>

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rob-D
    Paul.
    Where did you get that micrometer widget?
    You can get an un-limited free trial from here:

    http://www.iconico.com/index.aspx

    Comes in very useful at times

  22. #22
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can get an un-limited free trial from here:

    http://www.iconico.com/index.aspx

    Comes in very useful at times
    Thanks, very useful.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  23. #23
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'd like to point out there is a flaw in my htc - any psuedo-classes or psuedo-elements that IE doesn't recognize (like :after) will be treated as :before by the htc... so it's not perfect.

    The reason is that IE returns ":unknown" in "selectorText" if the psuedoclass or psuedoelement is unsupported - Does anyone know of a way to get a full psuedo-element name out of a stylesheet in IE without it mangling it?

  24. #24
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is quite a simple solution that seems to work perfectly in all the browsers I have tested it in (including IE6)....

    HTML 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>ro0bear</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
    }
    
    p {position: relative; left: 51px;}
    
    
    
    body {
    background-image: url('http://www.pmob.co.uk/temp/images/arrowpoint.gif');
    background-repeat: no-repeat;
    background-position: 75% 94px;
    
    }
    
    /* Span just to illustrate the 50px X 50px point in the corner */
    span {background-color: orange; width: 50px; height: 50px; float: right;}
    
    </style>
    </head>
    <body>
    <p><!-- Span just to illustrate the 50px X 50px point in the corner --><span></span></p>
    </body>
    </html>
    Does it pass?

    ro0bear

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Haven't you got any work to do lol

    Yes that's a good solution

    The only drawback would be that it upsets the centred element but that wasn't a requirement so you've passed


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
  •