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%;
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
Originally Posted by Paul O'B
Bookmarks