Search the Community

I have 2 menu div's floating to the right of a canvas. They menus are designed to slide out on hover and slide back to normal afterwards. The problem is that when I hover on the second div, the location (position) of the first div shifts with it. Example of it in action is at: http://jsfiddle.net/Xb2q9/ I know it has to do with the order that the divs are listed and position: relative but haven't managed a work around. My HTML <table class="unpadded-table"> <tr> <td> <div id="screen"> <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas> <div id="firstmenu"> <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div> </div> <div id="secondmenu"> <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div> </div> </div> </td> </tr> </table> My CSS: #firstmenu { float:right; background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top; padding-left: 10px; ; margin-top: 15px; padding-top: 0px; width: 10px; height: 180px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; display: inline-block; } #secondmenu { float:right; background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top; padding-left: 10px; margin-left: 0px; padding-top: 0px; width: 10px; height: 250px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; margin-top: 250px; display: inline-block; } #firstmenucontents{ background: #ffffff; margin-right: 15px; margin-top: 0px; margin-left:0px; width: 135px; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; opacity:0.0; border:1px solid black; float:left; } #firstmenu:hover{ width: 150px; opacity:1.0; } #secondmenu:hover{ width: 150px; opacity:1.0; } #firstmenucontents:hover, #secondmenucontents:hover { opacity:1.0; width: 135px; } .example { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px #000 solid; float: left; width: 655px; margin-left: 100px; width: }

In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari I just need the OR image to say in the same spot to matter what browser or window size is used here is the code that Im currently using <div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px"> <img src="http://173.83.251.7/~iworeitb/wp-content/uploads/2013/06/or.png" alt="" /> </div> Please help thanks