Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente bannato
    Registrato dal
    Dec 2004
    Messaggi
    235

    IE 7 e i link del menù

    Ho appena terminato il nuovo layout del sito che ha questo aspetto. L'ho testato con tutti i browser senza problemi. Oggi lo ho testato con il famigerato IE7 e ho scoperto che i link della barra di navigazione superiore sono sfasati. In pratica nel link mettendo il puntatore sopra viene coperta solo la parte superiore della parole e non tutta come negli altri browser (compresi precedenti di IE 7).
    Sapete consigliarmi quale modificare fare nel foglio di stile per risolvere la cosa?

  2. #2
    Utente bannato
    Registrato dal
    Dec 2004
    Messaggi
    235
    up

    Cerco di spiegare meglio la differenza almeno tra ie7, ie6 e firefox 2.0.
    Con ie6 se passi sul link in alto tutta la zona attorno al link è grigia. Con firefox quasi uguale, anche se rimane una piccola zona sotto la scritta non grigia. Con ie7 la zona si allarga, ovvero solo la parte sopra diventa grigia e non anche la parte subito sotto alla scritta.

    Ho usato un bel mucchio di hack e mi sono complicato un po' la vita... Credo che dipende dalla dimensione del carattere nella pagina con ie, mentre mozilla non ha problemi, perchè aumentando la dimensione dello stesso, il link allo stato hover cambia altezza.

    Dal poco di teoria che conosco dovrebbe essere la classe nav allo stato hover, che porta problemi, in quanto non ho definito un'altezza precisa. Dal punto di vista pratico non sono riuscito a risolvere la cosa e vorrei evitare di mettere mano su tutto!

    Visto che con IE se si cambia la dimensione del carattere cambia l'altezza dell'hover, quel che ho provato a fare (senza successo...) è di dare ai link della classe nav la stessa altezza del div id topcontainer e poi ho messo il display: block agli stessi, con un line-height del 100%...

    Sto dicendo stupidagini? C'è una mano più esperta che mi può dare una mano?

    Questa è il codice su cui ho provato a mettere mano:
    #topnavcontainer{
    background-image: url('http://www.utopie.it/k/images/design/navbg.jpg');
    margin:0;
    background-color:#3300CC;
    height:19px;
    \height:25px;/* IE5 HACK */
    he\ight:19px;
    border-top:1px solid #666666;
    border-bottom:1px solid #131008;
    font-size:75%;
    text-align:right;
    font-family: Verdana, Arial, Helvetica, sans-serif; padding-left:0px; padding-right:0; padding-top:4px; padding-bottom:0px
    }
    #navcontainer{
    background-image:url('http://www.utopie.it/k/images/design/topbg.jpg');
    background-repeat:repeat-x;
    margin:0;
    background-color:#FFFFFF; padding-left:0; padding-right:0; padding-top:20px; padding-bottom:0
    }

    /* Styles for Menu Items */
    #navcontainer ul li a{
    border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; display:block;
    text-decoration:none;
    color:#F5F5F5;
    background:#3300CC;/* IE6 Bug */
    padding:5px;
    border-bottom:0px none;
    width:168px; font-style:normal; font-variant:normal; font-weight:normal; font-size:70%; font-family:verdana, Arial, Verdana, Helvetica, sans-serif
    }
    /* this is for ie6 */
    * html #navcontainer ul li{
    float:left;
    height:1%;
    }
    * html #navcontainer ul li a{
    height:1%;
    }
    /* end comments */

    #navcontainer ul li a:hover{
    color:#FFFFFF;
    background:#666699;/* Hover Styles */
    }
    #navcontainer li ul li a{
    padding:5px 5px;/* Sub Menu Styles */
    }
    #navcontainer li:hover ul, #navcontainer li.over ul{
    display:block;/* The magic */
    }

    /* THE TOP PRIMARY NAVIGATION (simple rollovers) */
    a.nav:link, a.nav:visited{
    color:#FFFFFF;
    }
    a.nav{
    background: transparent;
    margin:0px;
    padding:4px 5px 5px 5px;
    text-decoration:none;
    }
    a.nav:hover{
    color:#FFFFFF;
    background:#666699;
    }
    #on{
    color:#FFFFFF;
    background:#666699;
    }
    span.hide{
    display:none; /* Hides logo, break spaces, skip nav etc */
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.