Ir para conteúdo
Fórum Script Brasil
  • 0

menu horizontal aparece vertical no IE

felipepriess

Perguntado por felipepriess,

 Share

Pergunta

felipepriess

felipepriess

Postado
Postado (editado)

Tenho um menu horizontal com dropdown feito no css, funciona perfeitamenta no FF, Opera, Safari e Chrome, mas adivinha ? no IE (9) não -.-

O menu que era pra ser horizontal, aparece vertical, e totalmente fora do lugar, já tentei varias coisas, mas nada funciona, o problema parece estar na tag "menu-hv" do css

Estou disponibilizando o codigo abaixo, qualquer dica é bem vinda =D

css:

.ie .menu_layout{
display: table-cell;
font-family: calibri;
width: 102px;
height: 56px;
background-image: url('images/botao_hover.png');
text-align:center;
}
.content
{
width: 984px;
height: 511px;
font-family: calibri;
overflow: auto;
}
.logo
{
position:relative;
left: 30px;
bottom:-50px;
}
.menu_layout
{
font-family: calibri;
display: table-cell;
vertical-align: middle;
width: 102px;
height: 56px;
background-image: url('images/botao_hover.png');
text-align:center;
color: black;
text-decoration: none;
}
.menu_layout:hover{
text-decoration: none;
background-image: url('images/botao_hover.png');
background-position: 0 -56px;
color: white;
text-decoration: none;
}
.texto
{
font-family: calibri;
text-align:center;
}
.posmenu
{
position:relative;
bottom:-8px;
left: 2px;
}
.posdropdown
{
top: -10px;
}
.gecko .posdropdown
{
top: -10px;
left: -200px;
}
.ie .posmenu
{
bottom:-4px;
left:-2px;
}
.menu-hv
{ 
position: relative;
display: block;
font-family: calibri;
display: table-cell;
width: 102px;
height: 56px;
text-decoration: none;

}
.menu-hv *
{

line-height: 56px;
position:relative;
font-family: calibri;
display: table-cell;
width: 102px;
height: 56px;
margin: 0; 
padding: 0;
text-decoration: none;
list-style-type:none;

}
 .menu-hv a 
{ 

 display: block; 
}
 .menu-hv li ul
{ 
float: rigth; 
    width: 100%;
position: absolute; 
visibility: hidden;
}
 .menu-hv li:hover ul, .menu-hv li.hover ul 
{ 
 visibility: visible 
}
 .menu-hv li:hover ul ul,.menu-hv li.hover ul ul
{ 
 visibility:hidden 
}
 .menu-hv li li:hover ul, .menu-hv li li.hover ul
{ 
 visibility: visible 
}
 .menu-hv li li:hover ul ul, .menu-hv li li.hover ul ul
{ 
 visibility: hidden 
}
 .menu-hv li li li:hover ul, .menu-hv li li li.hover ul
{ 
 visibility: visible 
}
 * html * { 
color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '';
} } )(this) , 'auto') }
html: 
<html>
<head> 
<title></title>
<link rel="stylesheet" href="styles.css" />
<script src="css_browser_selector.js" type="text/javascript"></script>
</head>
<body>
<div align='center'>
<table border='0' width='948' height='535'>
<tr><td>
<div class='logo'>
<img src='images/logo.png'>
</div>
</td>
</tr>
<tr>
<td>
<div class='posmenu'>

<div align='right'>
<div class='menu-hv'>
    <li>
        <a href='#' class='menu_layout'>Clientes</a>
        <ul>
                    <li>
                    <a href="index.php?pasta=clientes/cadastro&arq=form_cadastro#content" class='posdropdown'>Cadastrar</a>
                    </li>
                    <li>
                    <a href="index.php?pasta=clientes/pesquisa&arq=visualizar#content" class='posdropdown'>Cadastrados</a>
                    </li>
                    <li>
                    <a href="index.php?pasta=clientes/alteracao&arq=form_alteracao#content" class='posdropdown'>Editar / Excluir</a>
                    </li>
                </ul>
        
        </li>
                    <li>
            <a href="#" class='menu_layout'>Produtos</a>
                <ul>
                    <li>
                    <a href="index.php?pasta=produtos/cadastro&arq=form_cadastro#content" class='posdropdown'>Cadastrar</a>
                    </li>
                    <li>
                    <a href="index.php?pasta=produtos/pesquisa&arq=visualizar#content" class='posdropdown'>Cadastrados</a>
                    </li>
                    <li>
                    <a href="index.php?pasta=produtos/alteracao&arq=form_alteracao#content" class='posdropdown' >Editar / Excluir</a>
                    </li>
                </ul>
        </li>
        
        <li>
            <a href="index.php?pasta=venda&arq=form_venda#content" class='menu_layout'>Vendas</a>
                
        </li>
        
    

</ul>

</div></div></div>
</tr>
</td>
<tr>
<td>
<a name='body'><img src='images/cont.png'></a>
</td>
</tr>
<tr>    
<td>
<!--<a name='news'><img src='images/contentbody.png'></a>-->
<div class='content'>
<br><br>
<a name='content'>
<?php
    if (isset($_GET['pasta'])&& isset($_GET['arq']))
    {
        
        
        $pasta=$_GET['pasta'];
        $arq=$_GET['arq'];
         echo "<div align='center'>";
        include "$pasta/$arq".".php";
        echo "</div>";
    }else   {    
             
            }
?>
</a>
</div></td> </tr>
<tr><td><a name='footer'><img src='images/footer.png'></a></td> </tr>
</td>
</tr>
</table>
</div>
</body>
</html>

Editado por felipepriess
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
felipepriess

felipepriess

Postado
  • Autor
Postado

então JaguA, o width é baseado no tamanho da imagem que eu estou usando para o menu (hover), mas mesmo assim que fiz o que voce falou, mas não funcionou, estou saindo para almocar agora, quando voltar, vou postar uma print de como fica no IE, e como deveria ficar, assim fica mais facil entender o que esta havendo ;)

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...