Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di belize
    Registrato dal
    May 2004
    Messaggi
    116

    barra di navigazione con div, problemi compatibilità

    Ho creato un menu di navigazione affiancando tre div (vd. foto nav_ok.gif).
    I div contengono un testo e un'immagine di sfondo.

    Sapete dirmi perchè con IE7 e FF funziona (menu 1 nella foto) e invece con IE6 e IE 5.5 mi sballa tutto (menu 2)?
    Che soluzione mi suggerite?

    Vi allego foto e codice.

    Premetto che ho attribuito un padding ad ogni div per spostare il testo. Per questo motivo ho dovuto ridurre il width e height di ogni div di tanti px quanto era il loro padding, perchè altrimenti mi creava un margin attorno al div stesso.



    .botFascia2 {
    float: left;
    height: 24px;
    padding-left: 29px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: left top;
    text-align: left;
    font-weight: normal;
    letter-spacing: 0px;
    color: #FFFFFF;
    }


    <div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); width:114px; height:17px ">Chi siamo, attivit&agrave; </div>
    <div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); width:114px; height:17px ">La nostra filosofia </div>
    <div class="botFascia2" style="background-image:url(images/bott_top_1_off.gif); width:136px; height:17px ">Principali aree di intervento </div>
    Immagini allegate Immagini allegate

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    sospetto che tu non stia usando un doctype oppure che il doctype non sia xhtml strict 1.0

    se ho indovinato allora il problema dipende dall'errata interpretazione del box model (stai lavorando in quirk mode) per cui IE6 considera il padding già compreso nel width (IE 5.5. lo farebbe comunque anche con doctype rigido)

    dal momento che hai

    padding-left 29px
    e padding-top 5px

    il primo div dovrebbe avere width 114+29 = 143px e height 17+5 = 22px;
    quindi o scrivi un css commento condizionale (soluzione preferibile) oppure usi lo star hack (aumentando il disordine) in questo modo

    codice:
    <div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); 
    width:114px; height:17px;*width: 143px; *height:22px;">Chi siamo, attività </div>
    ciò va fatto anche per gli altri div
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

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.