Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420

    padding-bottom diverso tra ie/chrome e ff

    Ciao a tutti!
    Ho un problema che potrebbe essere relativo al padding, ma non ne sono sicuro...

    ho questo semplice codice:

    Codice PHP:
    div{margin0;     
             
    padding0; }  

    cont a{border:solid 1px}

    <
    div id="cont">
        <
    a href="#">link1</a><br>
        <
    a href="#">link2</a>
    </
    div
    Visualizzando il risultato su diversi browser mi accorgo che su ff visualizzo esattamente quello che mi aspetto, mentre su ie e su chrome, l'altezza dello spazio dei link è di molto superiore... In pratica, mentre su ff, il border-bottom mi sovrascrive quasi l'underline del link (e va benissimo così), in ie e in chrome, tra l'underline e il border-bottom ci sono (ad occhio) 3-4px.
    Poiché nelle regole di reset (da cui quell'estratto in cima) c'è padding=0, mi viene in mente che quello spazio non sia padding... ma come eliminarlo?
    L'unico modo che mi è venuto in mente per risolvere il problema è stato racchiudere i 2 link in altrettanti div ed impostare un'altezza predefinita... ma è corretto operare in questo modo?
    Grazie a tutti!
    - "Si sono vegetariano. Diciamo che non mangio nulla che abbia un cuore"
    - "E i carciofi?"

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Hai provato a definire esplicitamente l'attributo line-height?
    (prova a definirlo nelle regole di reset e/o nelle regole dei link)

    PS: nota che nel codice postato c'e` un (piccolo) errore semantico: non si puo` scrivere un testo (e un link e` comunque un testo) dentro un <div> direttamente. Il testo va inserito dentro un <p> (o altro elemento che puo` contenere il testo).

    Consiglio: quando fai questo tipo di prove, usa sempre un colore di sfondo diverso in tutti gli elementi: in tal modo vedi esattamente quali elementi occupano quale spazio.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420
    Ciao grazie per la risposta prima di tutto... si di solito uso i bordi di colori differenti per fare queste prove, ma anche con il colore di sfondo mi accorgo della stessa cosa... è spazio che appartiene al tag a e si trova al di sotto dell'underline del link ma prima del margin bottom... Ho provato ad impostare l'attributo line-height (=0?) ma non so esattamente cosa fa.. me li sovrappone quasi... in ogni caso lo spazio al di sotto dell'underline resta invariato... Potrebbe dipendere dal tipo font? Te lo chiedo perché mi sono accorto che una frase con un font particolare occupa più spazio su un browser rispetto ad un altro... che so, magari interpretano la spaziatura tra le lettere o le parole in maniera diversa... Cmq alla fine era solo una curiosità visto che racchiudendo i link in dei div risolvo il problema....
    Per quanto riguarda l'errore semantico... ti confesso che sono poco più di un principiante... cosa comporta scrivere testo direttamente all'interno di un div? Se invece di usare <p> utilizzassi <span> ?
    Grazie 1000
    - "Si sono vegetariano. Diciamo che non mangio nulla che abbia un cuore"
    - "E i carciofi?"

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Quote Originariamente inviata da sitodue Visualizza il messaggio
    Ciao grazie per la risposta prima di tutto... si di solito uso i bordi di colori differenti per fare queste prove,
    il border ha il difetto di occupare dello spazio supplementare, ma comunque lo scopo e` lo stesso.
    ma anche con il colore di sfondo mi accorgo della stessa cosa... è spazio che appartiene al tag a e si trova al di sotto dell'underline del link ma prima del margin bottom... Ho provato ad impostare l'attributo line-height (=0?) ma non so esattamente cosa fa..
    line height:0 non e` una cosa sana ... ; line-height e` una misura relativa allo spazio disponibile, oppure una misura assoluta dello sapzio che deve occupare. Vedi il tuo manuale preferito per come si usa
    me li sovrappone quasi... in ogni caso lo spazio al di sotto dell'underline resta invariato... Potrebbe dipendere dal tipo font? Te lo chiedo perché mi sono accorto che una frase con un font particolare occupa più spazio su un browser rispetto ad un altro... che so, magari interpretano la spaziatura tra le lettere o le parole in maniera diversa...
    Ogni browser ha i suoi font, e non e` detto che uno stesso font sia uguale in ogni browser (anche se sarebbe auspicabile)
    Cmq alla fine era solo una curiosità visto che racchiudendo i link in dei div risolvo il problema....

    Per quanto riguarda l'errore semantico... ti confesso che sono poco più di un principiante... cosa comporta scrivere testo direttamente all'interno di un div? Se invece di usare <p> utilizzassi <span> ?
    Grazie 1000
    <span> e` comunque un font che deve stare dentro un <p> (o sim).
    In realta` <div> e` un oggetto di tipo block che puo` contenere solo oggetti di tipo block;
    <p> e` di tipo block che puo` contenere soltanto elementi di tipo inline;
    <span>, <a>, <img>, ecc sono elementi di tipo inline.
    Un elemento inline non puo` avere dimensioni (occupa lo spazio intrinseco del contenuto).
    Pero` con i CSS si puo` cambiare il tipo di elemento. Far diventare block uno che di default e` inline puo` essere utile in qualche caso; il viceversa e` possibile ma non e` saggio (puo` avere conseguenze strane, e diverse in browser diversi).

    Comunque fare errori semantici, puo` avere conseguenze in qualche caso, e soprattutto saltano fuori problemi che credevi superati quando qualcuno usa la tua pag con un browser diverso (= che ha qualche caratteristica diversa, tipo la dimensione, il produttore, il sistema operativo, il monitor), che non hai preso in considerazione quando hai fatto le prove.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

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.