OK. With the hint I did it and found a ie8 fix. I tell my wife - “I figured it out!”. She responds - “how much money did you make?”
lol - It’s not all about money 
Well done Eric I knew you’d figure it out.
Harsh
LOL, I get that all the time.
On the bright side, knowing these things helps solve the problems that do make money.
I have a fully fluid solution from Eric also so well done again Eric.
Thanks Paul. I tried for a long while to find a way to remove the overflow hidden on the body and the extra hook on the fluid version but came up empty handed.
I’m stumped on this one. 
I think I know what to use, just now how to use them.
Before I tried this it seemed simple, but After attempting it, it is not as it seems.
It is possible as there is no overflow:hidden at all in my examples
I’m stumped on this one. I think I know what to use, just now how to use them.
Before I tried this it seemed simple, but After attempting it, it is not as it seems.
You solved the clues anyway so that was a good start
I’ll give the answers out later today as this seems to have run its course now. Thanks to all those that took part.
I have another interesting quiz to follow this that I will post tomorrow.
Solution Time:
Ok here we go, time for some answers.
Thanks to all that took part and those that watched from the sidelines. This was quite a fun quiz and although ultimately it doesn’t do anything useful it does cover some good ground and useful techniques for modern browsers.
As you gathered from the clues I gave out the main work was done by using the pseudo elements :before and [URL=“http://reference.sitepoint.com/css/pseudoelement-after”]:after to place extra content using the [URL=“http://reference.sitepoint.com/css/content”]content property so that we could apply some borders to the layout.
We use before and after on the list items and before and after on the anchors and that will allow us to add the 4 borders that we need. The borders can be placed absolutely using top and bottom and right and left and as long as there is no stacking context on the list then that will mean they will reach the browsers edges. Some of you used large dimensions and overflow:hidden to accomplish this but using co-ordinates is neater.
You can see it in action here (with the [URL=“http://www.pmob.co.uk/temp/crosshair-fluid.htm”]fluid version here).
A few of the entries had the persistence problem previously mentioned and when you moved off the menu but within the guides the lines did not disappear. The cause was usually that a both borders had been set at the same time and of course while being hovered they always remained active. Using 4 separate borders on 4 different pseudo elements we avoid this problem.
(A couple of you spotted that in the fluid version the anchor needs to be display:inline-block because if it starts as the first word on a line or the anchor splits to two lines then it goes to pieces.)
[B]I received entries from the following:
Timo, Rayzur, Raffles, Eric Watson, Raffles, Hueji.[/B]
Timo, Raffles and Eric were the three that did both examples and apart from some minor glitches all passed the test (eventually). Therefore I declare all three joint first (a bit of a cop out I know but I couldn’t decide on an outright winner :)).
Thanks to all though as you all had great ideas and obviously put some thought into this.
Here are the winning entries starting with my original solution also.
Paul Fixed width:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.guides {
padding:0;
list-style:none;
float:left;
margin:15em;
border-top:1px solid #9cf;
border-bottom:1px solid #9cf;
width:150px;
}
ul.guides li {
background:#9ff;
border:1px solid #9cf;
border-right:0;
}
ul.guides a {
display:block;
padding:5px 10px;
color:#000;
text-decoration:none;
text-align:center;
border-right:1px solid #9cf;
}
ul.guides li:hover {background:#9cc}
ul.guides:hover:after,
ul.guides:hover:before,
ul.guides li:hover:before,
ul.guides li:hover:after {
content:"";
position:absolute;
}
ul.guides li:hover:before,
ul.guides li:hover:after {
border-bottom:1px solid #000;
left:0;
right:0;
position:absolute;
}
ul.guides li:hover:before{margin-top:-1px}
ul.guides:hover:before,ul.guides:hover:after {
bottom:0;
top:0;
border-left:1px solid #000;
}
ul.guides:hover:after{margin-left:-1px}
ul.guides:hover:before{margin-left:150px}
ul.guides li:hover {/* IE8 Fix*/
border-top:1px solid #000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<ul class="guides">
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
</body>
</html>
Paul: Fluid Width:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.guides {
padding:20px;
margin:0 auto;
width:60%;
margin:2em auto;
border:5px solid red;
}
.guides a {
display:inline-block;
}
.guides a:hover:after, .guides a:hover:before {
content:" ";
border-bottom:1px solid #000;
right:0;
left:0;
width:100%;
position:absolute;
margin-left:-1px;
display:block;/* strange but true*/
}
.guides b:hover:before, .guides b:hover:after {
content:" ";
top:0;
bottom:0;
border-right:1px solid #000;
position:absolute;
}
</style>
</head>
<body>
<div class="guides"> Lorem ipsum dolor sit amet, <a href="#"><b>consectetur adipiscing elit</b></a>. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna.<a href="#"><b> Morbi condimentum massa</b></a> sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc <a href="#"><b>pulvinar</b></a>, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. <a href="#"><b>Aliquam</b></a> eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, <a href="#"><b>et fermentum</b></a> nisi. Suspendisse potenti. Ut pellentesque lorem <a href="#"><b>ut metus</b></a> convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, <a href="#"><b>rutrum</b></a> euismod nisl.</div>
</body>
</html>
Timo: Fixed width
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.guides {
padding:0;
list-style:none;
margin:0;
border-top:1px solid #9cf;
border-bottom:1px solid #9cf;
}
ul.guides a {
border:1px solid #9cf;
background:#9ff;
display:block;
color:#000;
text-decoration:none;
}
ul.guides a:hover {
background:#9cc;
}
/*added css*/
ul.guides {
width:10em;
margin:10em auto;
}
/*have to apply hover on <li> instead of <a> to avoid IE8 bug*/
ul.guides li:hover:after,
ul.guides li:hover:before {
content:'';
border-bottom:solid #000 1px;
display:block;
width:100%;
left:0;
position:absolute;
margin-top:1px;
}
ul.guides li:hover:before {
margin-top:-2px;
}
ul.guides:hover:after,
ul.guides:hover:before {
content:'';
display:block;
height:100%;
top:0;
border-right:1px solid #000;
position:absolute;
}
ul.guides:hover:after {
margin-left:10em;
}
ul.guides a {
text-align:center;
padding:.1em 0;
}
</style>
</head>
<body>
<ul class="guides">
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
</body>
</html>
Timo Fluid:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.guides {
border:solid red 5px;
padding:2em;
margin:5em auto;
width:40em;
line-height:1.25em;
}
.guides a {
display:inline;
}
.guides a:hover b:after,
.guides a:hover b:before,
.guides a:hover:after,
.guides a:hover:before {
content:'';
display:inline;
position:absolute;
}
.guides a:hover b:after,
.guides a:hover b:before {
border-top:solid #000 1px;
width:100%;
left:0;
}
.guides a:hover b:after {
margin-top:1.25em;
}
.guides a:hover:after,
.guides a:hover:before {
height:100%;
top:0;
border-right:1px solid #000;
}
.guides a:hover:after {
border:0;
border-left:1px solid #000;
}
</style>
</head>
<body>
<div class="guides"> Lorem ipsum dolor sit amet, <a href="#"><b>consectetur adipiscing elit</b></a>. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna.<a href="#"><b> Morbi condimentum massa</b></a> sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc <a href="#"><b>pulvinar</b></a>, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. <a href="#"><b>Aliquam</b></a> eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, <a href="#"><b>et fermentum</b></a> nisi. Suspendisse potenti. Ut pellentesque lorem <a href="#"><b>ut metus</b></a> convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, <a href="#"><b>rutrum</b></a> euismod nisl.</div>
</body>
</html>
Raffles:Fluid and fixed in one demo.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.guides, div.guides {
padding:0;
list-style:none;
vertical-align:middle;
margin:20em 0 0 10%;
width:30%;
border-top:1px solid #9cf;
border-bottom:1px solid #9cf;
}
div.guides {
margin:-12em 0 0 50%;
border:2px solid red;
}
ul.guides:hover li:before,
ul.guides li:hover a:before,
ul.guides:hover li:after,
ul.guides li:hover a:after,
div.guides a:hover b:before,
div.guides a:hover b:after,
div.guides a:hover:before,
div.guides a:hover:after {
content:"";
position:absolute;
top:0em;
bottom:0;
width:2px;
background-color:black;
text-align:left;
}
div.guides a:hover b:before,
div.guides a:hover b:after {
height:2px;
width:auto;
top:auto;
right:0;
left:0;
bottom:auto;
}
div.guides a:hover b:after {
margin-top:1em
}
ul.guides:hover li:after {
margin-left:30%;
}
ul.guides li:hover > a:before,
ul.guides li:hover > a:after {
left:0;
right:0;
top:auto;
display:block;
bottom:auto;
height:2px;
width:auto;
}
ul.guides li {
font-size:16px;
}
ul.guides a {
border:1px solid #9cf;
background:#9ff;
display:block;
color:#000;
text-decoration:none;
}
ul.guides a:hover {
background:#9cc;
}
div.guides a {
display:inline-block;
}
</style>
</head>
<body>
<ul class="guides">
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
<div class="guides"> Lorem ipsum dolor sit amet, <a href="#"><b>consectetur adipiscing elit</b></a>. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna.<a href="#"><b> Morbi condimentum massa</b></a> sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc <a href="#"><b>pulvinar</b></a>, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. <a href="#"><b>Aliquam</b></a> eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, <a href="#"><b>et fermentum</b></a> nisi. Suspendisse potenti. Ut pellentesque lorem <a href="#"><b>ut metus</b></a> convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, <a href="#"><b>rutrum</b></a> euismod nisl.</div>
</body>
</html>
Eric Watson:Fixed version:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
overflow:hidden;
}
ul {
list-style:none;
border-left:1px solid #9cf;
border-right:1px solid #9cf;
width:250px;
margin:200px auto 0;
text-align:center;
position:relative;
}
li {
background:#9ff;
border-top:1px solid #9cf;
border-bottom:1px solid #9cf;
margin:-1px 0 0;
}
ul a {
display:block;
color:#000;
text-decoration:none;
position:relative;
line-height:1;
height:20px;
}
ul a:hover {
background:#9cc;
}
ul a:hover:before {
content:"";
position:absolute;
top:-1px;
left:-1000px;
width:2000px;
border-top:1px solid;
}
ul a:hover:after {
content:"";
position:absolute;
bottom:-1px;
left:-1000px;
width:2000px;
border-top:1px solid;
}
ul:hover:before {
content:"";
position:absolute;
top:-1000px;
left:-1px;
height:2000px;
border-left:1px solid;
}
ul:hover:after {
content:"";
position:absolute;
top:-1000px;
right:-1px;
height:2000px;
border-left:1px solid;
}
</style>
</head>
<body>
<ul>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
</body>
</html>
Eric :fluid version:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
overflow:hidden;
}
a {
display:inline-block;
color:#000;
text-decoration:none;
position:relative;
line-height:1;
height:20px;
}
a:hover:before {
content:"";
position:absolute;
top:-1px;
left:-1500px;
width:3000px;
border-top:1px solid;
}
a:hover:after {
content:"";
position:absolute;
bottom:-1px;
left:-1500px;
width:3000px;
border-top:1px solid;
}
b:hover:before {
content:"";
position:absolute;
top:-1500px;
left:-1px;
height:3000px;
border-left:1px solid;
}
b:hover:after {
content:"";
position:absolute;
top:-1500px;
right:-1px;
height:3000px;
border-left:1px solid;
}
</style>
</head>
<body>
<div class="guides" style="margin:100px"> Lorem ipsum dolor sit amet, <a href="#"><b>consectetur adipiscing elit</b></a>. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna.<a href="#"><b> Morbi condimentum massa</b></a> sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc <a href="#"><b>pulvinar</b></a>, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. <a href="#"><b>Aliquam</b></a> eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, <a href="#"><b>et fermentum</b></a> nisi. Suspendisse potenti. Ut pellentesque lorem <a href="#"><b>ut metus</b></a> convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, <a href="#"><b>rutrum</b></a> euismod nisl.</div>
</body>
</html>
If I’ve missed mentioning anyone please shout and if I haven’t posted your solution feel free to post your solution in the thread now or if you have improved versions etc.
Thanks to all that took part and look out for another similar quiz which I will post tomorrow as it uses some similar techniques to this one so it’s best I post it while it’s fresh in your minds
Argh, I didn’t catch that
.guides a {
display:inline;
}
part…
Considering how easy it would have been to find it, I should have spent a bit more time on the fluid version.
Well, at least now I know the trick for sure! 