menu horizontal aparece vertical no IE

felipepriess · May 7, 2012

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>

Edited May 7, 2012 by felipepriess

JaguA · May 7, 2012

Olha na tua classe de CSS menu-hv aumenta o tamanho da Width para que ele não quebre para baixo. e deixe como float left para que fique ordenado adequadamente e fique um do lado do outro.

felipepriess · May 7, 2012

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 ;)

felipepriess · May 7, 2012

Assim é o certo, como fica no FF, Opera, Chrome e Safari:

e assim é como esta no IE:

Sign In

menu horizontal aparece vertical no IE

Question

felipepriess

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

JaguA

Link to comment

Share on other sites

felipepriess

Link to comment

Share on other sites

felipepriess

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity