Test your CSS skills #7

**Paul O'B** · Dec 23, 2006, 07:52

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:

**Paul O'B** · Dec 23, 2006, 10:50

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

**Paul O'B** · Dec 23, 2006, 12:27

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

**deathshadow** · Dec 23, 2006, 12:34

Originally Posted by Paul O'B

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.

**Paul O'B** · Dec 23, 2006, 12:49

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

**Dan Schulz** · Dec 23, 2006, 14:51

And to think I just found out about this thread... bummer too.

**deathshadow** · Dec 23, 2006, 16:08

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

**markbrown4** · Dec 23, 2006, 16:10

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'

**Maujor** · Dec 24, 2006, 03:09

My solution was sent.

**Paul O'B** · Dec 24, 2006, 03:41

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.

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

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.

**Maujor** · Dec 24, 2006, 04:10

Originally Posted by Paul O'B

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.

**Paul O'B** · Dec 24, 2006, 04:44

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.

**markbrown4** · Dec 24, 2006, 15:50

Ok, a solution in now without the loophole

**Paul O'B** · Dec 25, 2006, 03:35

Yes you got it this time mark

**Paul O'B** · Dec 25, 2006, 03:35

I'll Post all the correct solutions I've received on Wednesday.

**Rob_D** · Dec 27, 2006, 08:33

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...

**Rob_D** · Dec 27, 2006, 08:49

Paul.
Where did you get that micrometer widget?

**Paul O'B** · Dec 27, 2006, 09:24

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

**Rob_D** · Dec 27, 2006, 09:47

Originally Posted by Rob_D

This is my (loose) solution which may be of interest - works in all browsers on OSX

Also IE6 on XP

**Paul O'B** · Dec 27, 2006, 10:10

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>

**Paul O'B** · Dec 27, 2006, 10:14

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

**Rob_D** · Dec 27, 2006, 10:32

Originally Posted by Paul O'B

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.

**deathshadow** · Dec 27, 2006, 11:15

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?

**ro0bear** · Jan 16, 2009, 07:15

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

**Paul O'B** · Jan 16, 2009, 07:56

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

The SitePoint Forums have moved.

User Tag List

Thread: Test your CSS skills #7

Thread Tools

Display

Test your CSS skills #7

Maujor's solution

Bookmarks

Bookmarks

Posting Permissions