[html5] Help - Which Browser's Behaviour Is Correct?

Tue Jul 13 11:01:41 PDT 2010

     Hi, this is a perplexing issue. This page below is a demo I had
previously been working on.
Basically, in Firefox, Safari and Chrome, it shows a plus and minus beside
each button.
In Opera, it seems to pile the first two Plusses on top of each other...
Can someone please tell me what is going on? Is this a standard behavior I
wish to use?

<!DOCTYPE html>
<html>
<head>
<title>Opera Versus Firefox, Chrome, Safari</title>
<style>
@media screen{
*{
cursor: default;
margin: 0;
border: 0 solid;
padding: 0;
}
body{
position: absolute;
min-width: 100%;
min-height: 100%;
font-family: verdana, sans-serif;
font-size: 16px;
background-color: #87cefa;
}
body>div:not(:nth-child(3)){
position: fixed;
top: 0;
left: 0;
}
body>div:nth-child(-n+2) button,body>div:nth-child(3)>div:last-child button{
cursor: pointer;
text-align: center;
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 16px;
}

body>div:nth-child(1){
right: 0;
border: 3px solid #87cefa;
text-align: center;
background-color: #1e90ff;
}
body>div:nth-child(1)>button{
border-width: 3px 6px;
border-color: #1e90ff #87cefa;
padding: 1px 9px;
color: #999999;
background-color: #000000;
}

body>div:nth-child(2){
bottom: 0;
overflow: auto;
border-right: 6px solid #000000;
background-color: #87cefa;
}
body>div:nth-child(2)>div{
border: 3px solid #87cefa;
padding: 3px;
background-color: #1e90ff;
}
body>div:nth-child(2)>div>div:first-of-type{
position: absolute;
margin: 3px 0 0 3px;
width: 16px;
background-color: #999999;
}
body>div:nth-child(2)>div>div:nth-of-type(1n+2){
position: absolute;
background-color: #000000;
}

/******** ****************************************************************
This Version Requires Javascript For Positioning
body>div:nth-child(2)>div>div:nth-of-type(2n+2){
left: 12px;
width: 10px;
height: 2px;
}
body>div:nth-child(2)>div>div:nth-of-type(2n+3){
left: 16px;
width: 2px;
height: 10px;
}
********/

body>div:nth-child(2)>div>div:nth-of-type(2n+2){
margin: 12px 0 0 6px; /***************************************** This Uses
No Javascript! (Opera, Somehow Gets it Wrong) */
width: 10px;
height: 2px;
}
body>div:nth-child(2)>div>div:nth-of-type(2n+3){
margin: 8px 0 0 10px; /***************************************** This Uses
No Javascript! (Opera, Somehow Gets it Wrong) */
width: 2px;
height: 10px;
}
/***************************************************************** What
Opera Does With It, I Don't Quite Understand.... */
/***************************************************************** That
Said, I'm Not Sure If I'm Using A CSS 2.1/3 Specified Behaviour */
/***************************************************************** I'm Not
Into Floats, Maybe They Could Do Better */

body>div:nth-child(2)>div>button{
margin: 3px;
height: 20px;
padding: 1px 2px;
font-family: 'courier new', monospace;
color: #000000;
background-color: #ffd700;
}
body>div:nth-child(2)>div>button:nth-of-type(1n+3){
margin-left: 25px;
color: #faebd7;
background-color: #0000ff;
}

body>div:nth-child(3)>div:not(:last-child){
cursor: text;
border: 3px solid #87cefa;
padding: 6px;
text-align: left;
font-size: 18px;
color: #000000;
background-color: #ffe4c4;
}
body>div:nth-child(3)>div:last-child{
border: 3px solid #ff0000;
padding: 6px;
text-align: center;
font-weight: bold;
color: #999999;
background-color: #000000;
}
}
</style>
<script>
window.onload=function(){
var i=0,
h,
g,
f,
e,
d=document,
c=d.querySelectorAll('body>div:nth-child(3)>div'),
b=d.querySelectorAll('body>div:nth-child(-n+2) button'),
a=d.querySelectorAll('body>div');
for(d=160;b[i];i++){
e=b[i].offsetWidth;if(d<e&&i>2){d=e+6;}
b[i].onclick=function(i){return function(){xx.tl(i);};}(i-3);
}
d=[(d+16)/2,d,d+28];
for(i=1;b[i];i++){
/*************************************************************** Plus/Minus
Positioning Used When The "Margin Trick" Doesn't Work....
if(i>2){
b[i].previousSibling.style.top=40+(26*(i-3))+'px';
b[i].previousSibling.previousSibling.style.top=44+(26*(i-3))+'px';
}
*/
b[i].style.width=d[i>2?1:0]+'px';
}
b=a[1].querySelectorAll('div>button:nth-of-type(1n+3)');
e=a[1].querySelectorAll('div');
e[0].style.width=d[2]+'px';
d=e[0].clientHeight;
e[1].style.height=(d-38)+'px';
d=d===32+(b.length*26);
xx.tl=function(d){
var e=NaN,f=c.length-1,g=[],i;
for(i=0;c[i];i++){if(c[i].style.display===''){e=i;break;}}
if(d<0||e===f){
if(d===-2||e===f){
this.vs([c[f]]);
}
else if(e<f){
this.vs([a[0],a[1]]);
a[2].style.margin=a[0].style.display===''?(a[0].offsetHeight-3)+'px 0 0
0':'0 0 0 '+a[1].offsetWidth+'px';
window.scrollTo(0,0);
return;
}
}
if(d>=0||e<f){
if(d>=0){g.push(b[d].previousSibling,c[d]);}
if(e<f&&e!==d){g.push(b[e].previousSibling,c[e]);}
for(i=0;g[i];i+=2){
f=g[i].style.display==='';
g[i].nextSibling.style.backgroundColor=f?'#000000':'#0000ff';
g[i].previousSibling.style.backgroundColor=f?'#ffffff':'#000000';
}
this.vs(g);
}
};
xx.vs([a[0]]);
xx.tl(-1);xx.tl(-1);
xx.vs(c);
if(!d){throw TypeError('This Page Renders Best In A CSS3 Compatible
Browser!');}
};
var xx={
vs:function(a){
for(var i=0;a[i];i++){
a[i].style.display=a[i].style.display===''?'none':'';
}
return a;
}
};
</script>
</head>
<body>
<div><button>Mode</button></div>
<div>
<div>
<button>Options</button><button>Mode</button>
<div></div>
<div></div><div></div><button>Topic #1</button>
<div></div><div></div><button>Topic #2</button>
<div></div><div></div><button>Topic #3</button>
<div></div><div></div><button>Topic #4</button>
<div></div><div></div><button>Topic #5</button>
</div>
</div>
<div>
<div>
Topic #1 Contents
</div>
<div>
Topic #2 Contents
</div>
<div>
Topic #3 Contents
</div>
<div>
Topic #4 Contents
</div>
<div>
Topic #5 Contents
</div>
<div>
User Preference/License Placeholder
</div>
</div>
</body>
</html>

Note: this document is for testing purposes only..
Thanks!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100713/199e1d02/attachment-0002.htm>