Forum Moderators: not2easy
If you connect to <snip> you will see a top menu. Each menu option is a piece of a puzzle that is shown on mouseover.
In Firefox is shown perfectly. To achieve the puzzle effect correctly (that is, the left piece fit exactly to the right piece), I have to add a negative offset to the piece to the right, playing with z-index so that left piece is placed above the right piece only in mouseover.
Well... that offset works in IE, but not the z-index, causing the left piece to be shown cutted.
I embedded the style sheet in the test.html so that it will be easier for you to check, and contains the following:
<style type="text/css">
/* begin overall style */
html { height: 100%; }
body { height: 100%; font:11px Verdana,Arial; background:#000000; margin:0; padding:0; text-align: center }
img { border: 0 }
#main { margin: 0 auto; padding: 0; position: relative; width: 980px; height: 100%; border: solid 1px #ff0000; }
#leftpane { margin: 0 auto; padding: 0; width: 200px; position: relative; float: left; height: 100%; border: solid 1px #00ff00; }
#centerpane { display: none; float: left; margin: 0 auto; margin-left: 1px; padding: 0; padding-left: 20px; width: 759px; height: 50%; background-image: url(/images/paginas/fondo_tabla.gif); background-repeat: repeat-x; }/* Menú lateral (categorías) */
div.leftmenu { width: 200px; margin: 0 auto; padding: 0; text-align: left; }
ul.leftmenu { float: left; list-style:none; margin:0; padding:0; width: 200px }
ul.leftmenu * { height: 30px; font-family: arial; font-size: 11px; font-weight: bold; vertical-align: middle }
ul.leftmenu a { display:block; text-decoration:none; color: #DDDCD9; }
ul.leftmenu li { position:relative; margin: 0; }
/* Menú superior */
ul.topmenu { float: left; list-style:none; margin:0; padding:0; margin-top: 7px; }
ul.topmenu * { margin:0; padding:0; }
ul.topmenu a { display:block; color:#000; text-decoration:none }
ul.topmenu li { position:relative; float:left; margin: 0; margin:-7px }
ul.topmenu img { position: relative; z-index: -999; }
#pie-pagina { position: relative; margin: 0; padding: 0; }
</style>
Any help will be greatly appreciated
Thanks
Jaime
[edited by: eelixduppy at 8:10 pm (utc) on Aug. 31, 2009]
[edit reason] no personal URLs, please [/edit]
Legacy IE versions create spurious stacking contexts. Avoid creating them if possible.
z-indez and stacking contexts: [w3.org...]
Jaime
