André do Vale 76 Denunciar post Postado Outubro 11, 2010 Boas galera. Estou enfrentando um probleminha com um menu suspenso aqui. Nele, a segunda UL que é absoluta deveria ficar acima de um formulário pouco abaixo, que também está posicionado de forma absoluta. Porém, no IE6 e 7 não aceitam que eu declare um z-index menor para este formulário, e sempre deixam ele sobre a UL suspensa. Encontrei vários problemas semelhantes na internet, porém o pessoal conseguia resolver dando ao formulário posição relativa, o que não resolveu aqui, pois realmente tenho que posicionar o formulário num local bem incomodo. Alguém já enfrentou problema semelhante, ou tem uma solução em mãos? Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Outubro 11, 2010 depende muito de como está a tua marcação html. poste um link para o site, se não fica impossível sugerirmos algo. Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Outubro 11, 2010 Segue um HTML de teste: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> /* CSS RESET: início */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } /* CSS RESET: fim */ .menu div { left: -50%; float: right; position: relative; } .menu ul { left: 50%; position: relative; _float: left; } .menu li { float: left; } .menu a { display: inline-block; font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; line-height: 45px; padding: 0 15px; text-decoration: none; _height: 45px; } .menu a:hover, .menu a:active { background: #c00; color: #fff; } .menu ul ul { position: absolute; left: 0; background: #DBDBDB; border: 1px solid #fff; border-top: none; width: 120px; /margin: 45px 0 0 0; z-index: 999; } .menu ul ul li { float: none; padding: 0; background: none; } .menu ul ul a { display: block; font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 0 20px; line-height: 25px; background: none; _height: 25px; _float: none; } .menu ul ul a:hover, .menu ul ul a:active { background: #c00; color: #fff; } .formulario { position: absolute; top: 45px; } </style> </head> <body> <div class="menu"> <div> <ul> <li><a href="">Lorem</a> <ul> <li><a href="">Ipsum</a></li> <li><a href="">Dolor</a></li> <li><a href="">Sit</a></li> </ul> </li> <li><a href="">Amet</a></li> <li><a href="">Lorem</a></li> <li><a href="">Dolor</a></li> <li><a href="">Ipsum</a></li> <li><a href="">Teste</a></li> <li><a href="">Contato</a></li> </ul> </div> </div> <div class="formulario"> <form id="form1" name="form1" method="post" action=""> <label for="textfield">Teste</label> <input type="text" name="textfield" id="textfield" /> <label for="textfield2">Teste</label> <input type="text" name="textfield" id="textfield2" /> <label for="textfield3">Teste</label> <input type="text" name="textfield" id="textfield3" /> <label for="textfield4">Teste</label> <input type="text" name="textfield" id="textfield4" /> </form> </div> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Outubro 11, 2010 simples ^_^ o ie, apesar de muito criticado, interpreta algumas regras de uma forma, que eu pessoalmente concordo muito com ele. Veja, você não é capaz de colocar um elemento pai atrás do filho dele. Isso significa, que o pai do teu UL, deve ter z-indez maior que o form. E por sua vez, o ul maior que o form, e maior que o container dele mesmo. .menu div { left: -50%; float: right; position: relative; z-index: 2; }e .formulario { position: absolute; top: 45px; z-index: 1; } :lol: só isso ^_^ mesmo sendo html teste e tal... você precisa de tantos elementos só para fazer o menu? <div class="menu"> <div> <ul>dependendo do layout, pode ser facilmente substituido por: <ul class="menu"> Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Outubro 11, 2010 Opa, resolvido! Muito obrigado William! :) Esse "tanto" de elemento é para centralizar o menu em lista. É um "falsetizinho", e o .menu é um bloco do layout. ;) Compartilhar este post Link para o post Compartilhar em outros sites
