Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    41

    image-replace con errori su Mozilla

    Oi ciao a tutti!
    Io sono alle prime armi, sto montando un sito personale.
    Ho implementato un menù con image replace che funziona correttamente su eXPL 6 e che in testing funzionava anche su Mozilla Firefox 2, ora che ho terminato il menù della home e quello delle altre pagine, il tutto non funziona più su Firefox, appunto.

    Mi sono accorto studiando in giro di aver commesso errori nell'HTML, usando tabelle invece dei <div> e non avendo pensato a porre un elemento contenitore.
    Possono essere queste le cause del mal funzionamento?

    il mio sito: bi-unic.com

    il mio css:

    /* CSS Document */

    body {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    margin:0px;
    }

    /* Measurements for the nav image replacement MenuHome:
    The distance from the top to the...
    initial state = 0px
    rollover state = 542px
    selected state = 542px
    The distance from the far-left to the...
    Quim Somos button = 0px
    ShowRoom button = 106px
    Coleçoes button = 234px
    ConactUs button = 346px
    News button = 486px
    The width of the...
    Quem Somos button = 106px
    ShowRoom button = 128px
    Coleçoes button = 112px
    ConactUs button = 140px
    News button = 116px
    */

    ul#nav { background:url(img/MenuHome.gif);
    }

    ul#nav li {
    float:left;
    list-style-type:none;
    }

    ul#nav li a { height:542px;
    display:block;
    position:inherit;
    top:0px;
    padding:20px;
    margin-bottom:150px;
    text-indent:-9999px;
    overflow:hidden;
    outline:none;
    }

    li#navQuemSomos a, li#navShowRoom a, li#navColecoes a, li#navContactUs a, li#navNews a { background:url(img/MenuHome.gif);
    }

    li#navQuemSomos a { background-position:0 0; width:106px; left:0
    }

    li#navQuemSomos a:hover { background-position:0 -542px ! important;
    }

    li#navShowRoom a { background-position:-106px 0; width:128px; left:106px
    }

    li#navShowRoom a:hover { background-position:-106px -542px
    }

    li#navColecoes a { background-position:-234px 0; width:112px; left:234px
    }

    li#navColecoes a:hover { background-position:-234px -542px
    }

    li#navContactUs a { background-position:-346px 0; width:140px; left:346px
    }

    li#navContactUs a:hover { background-position:-346px -542px
    }

    li#navNews a { background-position:-486px 0; width:116px; left:486px }

    li#navNews a:hover { background-position:-486px -542px
    }


    .logoSmall {
    position:relative;
    top:-315px;
    left:2px;
    }

    .footer {
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    font-size:12px;
    margin:0px;
    position:absolute;
    left:38%;
    outline:none;
    }

    .footer a {
    color:#FFFFFF;
    outline:none;
    }

    .footerStrips {
    background-image:url(img/PatternFooter.gif);
    background-repeat:repeat-x;
    position:relative;
    top:-60;
    text-indent:-9999px;
    }

    /* Measurements for the nav image replacement NAV2:
    The distance from the top to the...
    initial state = 0px
    rollover state = 45px
    selected state = 45px
    The distance from the far-left to the...
    Home button = 0px
    Quim Somos button = 97px
    ShowRoom button = 207px
    Coleçoes button = 317px
    ConactUs button = 428px
    News button = 537px
    The width of the...
    Home button = 97px
    Quem Somos button = 110px
    ShowRoom button = 110px
    Coleçoes button = 111px
    ConactUs button = 109px
    News button = 113px
    */

    ul#nav2 { background:url(img/MenuNav2.gif);
    }

    ul#nav2 li {
    float:left;
    list-style-type:none;
    }

    ul#nav2 li a { height:45px;
    display:block;
    position:relative;
    top:0;
    left:230px;
    margin-top:10px;
    text-indent:-9999px;
    overflow:hidden;
    outline:none;
    }

    li#nav2Home a, li#nav2QuemSomos a, li#nav2ShowRoom a, li#nav2Colecoes a, li#nav2ContactUs a, li#nav2News a { background:url(img/MenuNav2.gif);
    }

    li#nav2Home a { background-position:0 0; width:97px; left:0
    }

    li#nav2Home a:hover { background-position:0 -45px ! important;
    }


    li#nav2QuemSomos a { background-position:-97px 0; width:110px; left:97px
    }

    li#nav2QuemSomos a:hover { background-position:-97px -45px ! important;
    }

    body#pageQuemSomos li#nav2QuemSomos a { background-position:-97px -45px;
    }

    li#nav2ShowRoom a { background-position:-207px 0; width:110px; left:207px;
    }

    li#nav2ShowRoom a:hover { background-position:-207px -45px ! important;
    }

    body#pageShowRoom li#nav2ShowRoom a { background-position:-207px -45px
    }


    li#nav2Colecoes a { background-position:-317px 0; width:111px; left:317px;
    }

    li#nav2Colecoes a:hover { background-position:-317px -45px ! important;
    }

    body#pageColecoes li#nav2Colecoes a { background-position:-317px -45px;
    }

    li#nav2ContactUs a { background-position:-428px 0; width:109px; left:428px;
    }

    li#nav2ContactUs a:hover { background-position:-428px -45px ! important;
    }

    body#pageContactUs li#nav2ContactUs a { background-position:-428px -45px;
    }

    li#nav2News a { background-position:-537px 0; width:113px; left:537px }

    li#nav2News a:hover { background-position:-537px -45px ! important;
    }

    body#pageNews li#nav2News a { background-position:-537px -45px;
    }

    .cab {
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    font-size:16px;
    font-weight:200;
    position:relative;
    margin-top:100px;
    margin-bottom:30px;
    }

    .formCnc {
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    font-size:12px;
    position:relative;
    margin:50px;
    }

    ul.contact p {
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    font-size:12px;
    position:relative;
    margin-top:15px;
    margin-bottom:0px;
    }


    Grazie!

  2. #2
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    41

    Soluzioni?

    Nessuno ha presente che tipodi problema è il mio????

    E' come uno sfarfallio di immagine, per favore date un occhio al sito e al codice sopra...

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    41

    Soluzione trovata.

    PROBLEMA RISOLTO!!!

    Caso qualcuno si trovi a implementare questo tipo di menù in puro css bisogna fare attenzione a non porre padding agli elementi lista[*].

    ORA FUNZIONA SU IExP 6 e Mozilla 2!

    CIAO A TUTTI!

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 © 2025 vBulletin Solutions, Inc. All rights reserved.