1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Problema CSS menu com IE6

Discussão em 'Web Development' iniciada por candycane, 21 de Julho de 2008. (Respostas: 4; Visualizações: 1178)

  1. candycane

    candycane Power Member

    Olá comunidade, hoje de manhã reparei que tenho um problema com o meu menu no IE6.. os links n ficam em linha, ficam um em baixo do outro... :(

    O meu CSS é este:
    Código:
     
    #menu {
     position:relative;
     display:block;
     border-top-width: 4px;
     border-top-style: solid;
     border-top-color:#B30000;
     /*border-top-color: #9D1313;*/
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     height:39px;
     font-size:11px;
     font-weight:bold;
     background:transparent url(bg_out.gif) repeat-x top left;
    }
    
    .menustyle:after{ /*Add margin between menu and rest of content in Firefox*/
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
    }
    
    .menustyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
     content: " " url(SpryMenuBarDown.gif); /*uncomment this line to use an image instead*/
    }
    
    #menu ul{
     margin:0;
     padding:0;
     list-style-type:none;
     width:auto;
    }
    #menu ul li{
     display:block;
     float:left;
     margin:0; 
    
     
    }
    #menu ul li a{
     display:block;
     color:#666;
     text-decoration:none;
     padding:11px 20px 0 20px;
     height:23px;
     background:transparent url(bg_div.gif) no-repeat top right;
    }
     
    #menu ul li a:hover{
     color:#B30000;
     background:#fff url(bg_over.gif) no-repeat top right;
     display:block;
    }
    
    #menu li {
     position: relative;
    }
     
     
     
    
     
  2. alfinete

    alfinete Power Member

    da ai o code html
     
  3. candycane

    candycane Power Member

    HTML:
    Código:
     
    <div class="menustyle" id="menu">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="produtos" rel="dropmenu1">Produtos</a></li>
    <li><a href="servicos.php">Serviços</a></li>
    <li><a href="contacto.php" >Contactos</a></li> 
    </ul>
    </div>
     
    
     
  4. candycane

    candycane Power Member

    Já resolvi o problema... Tive que modificar o #menu ul li a em:

    #menu ul li a{
    display:inline;
    float:left;

    color:#666;
    text-decoration:none;
    padding:11px 20px 0 20px;
    height:23px;
    background:transparent url(bg_div.gif) no-repeat top right;
    }
     
  5. alfinete

    alfinete Power Member

    Código:
     #menu {
     position:relative;
     display:block;
     border-top-width: 4px;
     border-top-style: solid;
     border-top-color:#B30000;
     /*border-top-color: #9D1313;*/
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     height:39px;
     
     font-size:11px;
     font-weight:bold;
     background:transparent url(bg_out.gif) repeat-x top left;
    }
    
    .menustyle:after{ /*Add margin between menu and rest of content in Firefox*/
     content: "."; 
     display: block; 
     height: 0;
     background-color:Red;
     clear: both; 
     visibility: hidden;
     
    }
    
    .menustyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
     content: " " url(SpryMenuBarDown.gif); /*uncomment this line to use an image instead*/
    
     }
    
    #menu ul{
     margin:0;
     padding:0;
     list-style-type:none;
     //*alterei aqui*//
     width:auto; // comprimento do menu total
    }
    #menu ul li{
     display:block;
     float:left;
     margin:2px; 
     
      //*alterei aqui*//
     width:100px;// comprimento de cada botão
     
    }
    #menu ul li a{
     display:block;
     color:#666;
     text-decoration:none;
     padding:11px 20px 0 20px;
      //*alterei aqui*//
     text-align:center;/*alinhamento do texto dos botões*
     height:23px;
     background:transparent url(bg_div.gif) no-repeat top right;
    }
     
    #menu ul li a:hover{
     color:#B30000;
     background:#fff url(bg_over.gif) no-repeat top right;
     display:block;
    }
    
    #menu li {
     position: relative;
     //*alterei aqui*// 
     width:70px;
     background-color:red; /*tira esta cor foi so para ver o alinhamento*/
    
    }
    
    outra resolução

    funciona bem em ie6 / 7 firefox , razoavel opera e safari
    é so mais uns tokes
     
    Última edição: 21 de Julho de 2008

Partilhar esta Página