You would think I could fix this - just did this in another thread. But this one is the whole body. If I give Opera overflow auto on the body instead of hidden then it will go to link two and three but won’t come back to link one or two. Weird? Here is my play-page. http://www.visibilityinherit.com/projects/css-content-swap3.php How to fix? Thanks!
It’s become my favourite new entry in the CSS specification by far… it has practical uses, it’s widely supported (and I’ve worked out how to get IE playing fair using a bit O scripting) and best of all… it makes single page designs easy, script free, and compatible with the back button and bookmarks. I reckon it’ll become one of the more widely used elements of CSS3 in the future as single page designs and AJAX hooks become ever increasingly used. 
This is the first time I’ve messed with :target - its pretty cool!
Yeah I thought so too, Alex brought it to my attention about a month ago and I did some testing with it here.
http://www.sitepoint.com/forums/showpost.php?p=4509238&postcount=13
But the target seems to be relative to the div calling it. How do I make it relative to the body?
In the example I posted above I eliminated that #full div and the AP target divs are positioning from the body.
Just remember to have something visible when no fragment link is selected in Opera.
Set the default for #one to the same value as what you would have in one:target (for consistency)
Hey Eric, I was playing around with :target on your code also.
I got one here that sets all three divs as AP and then lifts the target layer on top. It works in FF, Chrome, Safari & Opera.
<!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>{ visibility: inherit; } Testing</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#one, #two, #three {
position:absolute;
width:100%;
height:100%;
overflow:auto;
background:orange;
z-index:2;/*keep div#one on top at page load*/
}
#two {
background:lightblue;
z-index:1;
}
#three {
background:palegreen;
z-index:1;
}
#one:target,
#two:target,
#three:target {z-index:3;}
ul {
position:fixed;
z-index:10;
background:#FFF;
}
p {
margin:0 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
<div id="two"><p>test2</p></div>
<div id="three"><p>test3</p></div>
</body>
</html>
Well this is the first thing I have gotten to work in Opera. http://www.visibilityinherit.com/projects/css-contentswap4.php I’ve been messing wiht it for a few hours so I think I’m going to run with it. Unless someone else has a better fix (Ahhhh - AhhhPaulaaa). This is the first time I’ve messed with :target - its pretty cool! But the target seems to be relative to the div calling it. How do I make it relative to the body? So it stays at the top! Min-height 100% for some reason makes the paragraphs stay at the top but I don’t know why.
<!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>{ visibility: inherit; } Testing</title>
<?php $ua = $_SERVER["HTTP_USER_AGENT"]; $opera = preg_match("/\\bOpera\\b/i", $ua); ?>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
overflow-x:hidden;
}
#full {
min-height:100%;
width:300%;
overflow:hidden;
}
#one, #two, #three {
width:33.33%;
float:left;
}
.opera #one, .opera #two, .opera #three {
margin-left:-999em;
min-height:100%;
}
.opera #one:target, .opera #two:target, .opera #three:target {
margin-left:0;
}
ul {
position:fixed;
}
* html ul {
position:absolute;
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
p {
margin:0 50px;
}
</style>
</head>
<body <?php if ($opera) echo 'class="opera"'; ?>>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div id="full">
<div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
<div id="two"><p>test2</p></div>
<div id="three"><p>test3</p></div>
</div>
</body>
</html>
Nice Ray! Alex, anyone, when I set default of #one to be visible opera stops working all together. I tried many combos. And it all seems to be the same. #one has to be off screen and then be called back via target to work. Care to mess with it and see what I’m missing?
<!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>{ visibility: inherit; } Testing</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
overflow-x:hidden;
}
#full {
min-height:100%;
width:300%;
overflow:hidden;
}
#one, #two, #three {
width:33.33%;
float:left;
}
#one, #two, #three {
margin-left:-999em;
min-height:100%;
}
#one:target, #two:target, #three:target {
margin-left:0;
}
ul {
position:fixed;
}
* html ul {
position:absolute;
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
p {
margin:0 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div id="full">
<div id="one"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p></div>
<div id="two"><p>test2</p></div>
<div id="three"><p>test3</p></div>
</div>
</body>
</html>
Eric, I know for a fact Opera is a <insert naughty word here> when it comes to overflows being applied to fragment links - especially on the body, I’ve encountered the exact same issue you have there and even stranger ones besides it. Unfortunately there isn’t a fix that I am aware of for that specific Opera bug (I reported it to them over a year ago which they promptly ignored - like always). I have a solution though it’s not perfect (you’ll need JavaScript for the IE support - or provide what you currently have to IE through a conditional comment)… the CSS3 :target selector allows you to apply style to a fragment link upon navigating to it (so if you used #one:target - this would occur when #one is triggered) I use it extensively on my new look website (and I even have some friendly JavaScript to help IE out too!) feel free to poke around and see if any of my code will help you achieve your effect. It’s the only way I’ve found to get Opera playing nicely with the other kids on fragment navigation… though on an upside… :target works in Opera, Firefox, Safari and Chrome (it’s only IE that needs some rails).
Base yours off of Yuris because his is appearing to be working in Opera with this issue
Thanks guys! Ryan, oh ya, I’ll read over those. Alex, what’s your site again? Thanks guys!
Eric, My sites: http://www.hitechy.com/ (I did CSS3 voodoo to make it lovely and clean - I’m a fan of simplicity and accessibility).
Hope you fix your problem (if my code’s useful to you too it’ll be a bonus) 
Cool site Alex - very unique!
Thanks! I got inspired to turn my old design into something more usable, accessible and minimal… and that’s what I ended up with (IE was a pain in the butt) 
Ta- Da! http://www.visibilityinherit.com/projects/css-content-swap3.php I finally incorperated the jquery plugin I wanted and that took care of Opera on it’s own. This thing is going to be nice!