<div> Hi, this is a perplexing issue. This page below is a demo I had previously been working on.</div><div>Basically, in Firefox, Safari and Chrome, it shows a plus and minus beside each button.</div><div>In Opera, it seems to pile the first two Plusses on top of each other...</div>
<div>Can someone please tell me what is going on? Is this a standard behavior I wish to use?</div><div><br><!DOCTYPE html><br><html><br> <head><br> <title>Opera Versus Firefox, Chrome, Safari</title><br>
<style><br> @media screen{<br> *{<br> cursor: default;<br> margin: 0;<br> border: 0 solid;<br> padding: 0;<br> }<br> body{<br> position: absolute;<br>
min-width: 100%;<br> min-height: 100%;<br> font-family: verdana, sans-serif;<br> font-size: 16px;<br> background-color: #87cefa;<br> }<br> body>div:not(:nth-child(3)){<br>
position: fixed;<br> top: 0;<br> left: 0;<br> }<br> body>div:nth-child(-n+2) button,body>div:nth-child(3)>div:last-child button{<br> cursor: pointer;<br> text-align: center;<br>
font-family: verdana, sans-serif;<br> font-weight: bold;<br> font-size: 16px;<br> }<br><br> body>div:nth-child(1){<br> right: 0;<br> border: 3px solid #87cefa;<br>
text-align: center;<br> background-color: #1e90ff;<br> }<br> body>div:nth-child(1)>button{<br> border-width: 3px 6px;<br> border-color: #1e90ff #87cefa;<br> padding: 1px 9px;<br>
color: #999999;<br> background-color: #000000;<br> }<br><br> body>div:nth-child(2){<br> bottom: 0;<br> overflow: auto;<br> border-right: 6px solid #000000;<br>
background-color: #87cefa;<br> }<br> body>div:nth-child(2)>div{<br> border: 3px solid #87cefa;<br> padding: 3px;<br> background-color: #1e90ff;<br> }<br> body>div:nth-child(2)>div>div:first-of-type{<br>
position: absolute;<br> margin: 3px 0 0 3px;<br> width: 16px;<br> background-color: #999999;<br> }<br> body>div:nth-child(2)>div>div:nth-of-type(1n+2){<br> position: absolute;<br>
background-color: #000000;<br> }<br><br>/******** **************************************************************** This Version Requires Javascript For Positioning<br> body>div:nth-child(2)>div>div:nth-of-type(2n+2){<br>
left: 12px;<br> width: 10px;<br> height: 2px;<br> }<br> body>div:nth-child(2)>div>div:nth-of-type(2n+3){<br> left: 16px;<br> width: 2px;<br> height: 10px;<br>
}<br>********/<br><br> body>div:nth-child(2)>div>div:nth-of-type(2n+2){<br> margin: 12px 0 0 6px; /***************************************** This Uses No Javascript! (Opera, Somehow Gets it Wrong) */<br>
width: 10px;<br> height: 2px;<br> }<br> body>div:nth-child(2)>div>div:nth-of-type(2n+3){<br> margin: 8px 0 0 10px; /***************************************** This Uses No Javascript! (Opera, Somehow Gets it Wrong) */<br>
width: 2px;<br> height: 10px;<br> }<br> /***************************************************************** What Opera Does With It, I Don't Quite Understand.... */<br> /***************************************************************** That Said, I'm Not Sure If I'm Using A CSS 2.1/3 Specified Behaviour */<br>
/***************************************************************** I'm Not Into Floats, Maybe They Could Do Better */<br><br> body>div:nth-child(2)>div>button{<br> margin: 3px;<br> height: 20px;<br>
padding: 1px 2px;<br> font-family: 'courier new', monospace;<br> color: #000000;<br> background-color: #ffd700;<br> }<br> body>div:nth-child(2)>div>button:nth-of-type(1n+3){<br>
margin-left: 25px;<br> color: #faebd7;<br> background-color: #0000ff;<br> }<br><br> body>div:nth-child(3)>div:not(:last-child){<br> cursor: text;<br> border: 3px solid #87cefa;<br>
padding: 6px;<br> text-align: left;<br> font-size: 18px;<br> color: #000000;<br> background-color: #ffe4c4;<br> }<br> body>div:nth-child(3)>div:last-child{<br>
border: 3px solid #ff0000;<br> padding: 6px;<br> text-align: center;<br> font-weight: bold;<br> color: #999999;<br> background-color: #000000;<br> }<br> }<br>
</style><br> <script><br> window.onload=function(){<br> var i=0,<br> h,<br> g,<br> f,<br> e,<br> d=document,<br> c=d.querySelectorAll('body>div:nth-child(3)>div'),<br>
b=d.querySelectorAll('body>div:nth-child(-n+2) button'),<br> a=d.querySelectorAll('body>div');<br> for(d=160;b[i];i++){<br> e=b[i].offsetWidth;if(d<e&&i>2){d=e+6;}<br>
b[i].onclick=function(i){return function(){<a href="http://xx.tl">xx.tl</a>(i);};}(i-3);<br> }<br> d=[(d+16)/2,d,d+28];<br> for(i=1;b[i];i++){<br> /*************************************************************** Plus/Minus Positioning Used When The "Margin Trick" Doesn't Work....<br>
if(i>2){<br> b[i].previousSibling.style.top=40+(26*(i-3))+'px';<br> b[i].previousSibling.previousSibling.style.top=44+(26*(i-3))+'px';<br> }<br> */<br> b[i].style.width=d[i>2?1:0]+'px';<br>
}<br> b=a[1].querySelectorAll('div>button:nth-of-type(1n+3)');<br> e=a[1].querySelectorAll('div');<br> e[0].style.width=d[2]+'px';<br> d=e[0].clientHeight;<br>
e[1].style.height=(d-38)+'px';<br> d=d===32+(b.length*26);<br> <a href="http://xx.tl">xx.tl</a>=function(d){<br> var e=NaN,f=c.length-1,g=[],i;<br> for(i=0;c[i];i++){if(c[i].style.display===''){e=i;break;}}<br>
if(d<0||e===f){<br> if(d===-2||e===f){<br> this.vs([c[f]]);<br> }<br> else if(e<f){<br> this.vs([a[0],a[1]]);<br> a[2].style.margin=a[0].style.display===''?(a[0].offsetHeight-3)+'px 0 0 0':'0 0 0 '+a[1].offsetWidth+'px';<br>
window.scrollTo(0,0);<br> return;<br> }<br> }<br> if(d>=0||e<f){<br> if(d>=0){g.push(b[d].previousSibling,c[d]);}<br> if(e<f&&e!==d){g.push(b[e].previousSibling,c[e]);}<br>
for(i=0;g[i];i+=2){<br> f=g[i].style.display==='';<br> g[i].nextSibling.style.backgroundColor=f?'#000000':'#0000ff';<br> g[i].previousSibling.style.backgroundColor=f?'#ffffff':'#000000';<br>
}<br> this.vs(g);<br> }<br> };<br> xx.vs([a[0]]);<br> <a href="http://xx.tl">xx.tl</a>(-1);<a href="http://xx.tl">xx.tl</a>(-1);<br> xx.vs(c);<br> if(!d){throw TypeError('This Page Renders Best In A CSS3 Compatible Browser!');}<br>
};<br> var xx={<br> vs:function(a){<br> for(var i=0;a[i];i++){<br> a[i].style.display=a[i].style.display===''?'none':'';<br> }<br> return a;<br>
}<br> };<br> </script><br> </head><br> <body><br> <div><button>Mode</button></div><br> <div><br> <div><br> <button>Options</button><button>Mode</button><br>
<div></div><br> <div></div><div></div><button>Topic #1</button><br> <div></div><div></div><button>Topic #2</button><br>
<div></div><div></div><button>Topic #3</button><br> <div></div><div></div><button>Topic #4</button><br> <div></div><div></div><button>Topic #5</button><br>
</div><br> </div><br> <div><br> <div><br> Topic #1 Contents<br> </div><br> <div><br> Topic #2 Contents<br> </div><br> <div><br>
Topic #3 Contents<br> </div><br> <div><br> Topic #4 Contents<br> </div><br> <div><br> Topic #5 Contents<br> </div><br> <div><br> User Preference/License Placeholder<br>
</div><br> </div><br> </body><br></html><br></div><div><br></div><div>Note: this document is for testing purposes only..</div><div>Thanks!</div>