• User Attivo

    Problema margine inferiore con firefox

    Devo visualizzare 4 pezzi di un immagine uno sotto l'altro, in modo da formare un'immagine unica. Con explorer basta metterle una dopo l'altra con un <br>, ma con firefox mi mette sempre un margine di qualche pixel sotto ogni immagine.
    Ho provato a metterli in una tabella con cellpadding=0, ho provato a mettergli vspace=0, ho provato con l'attributo margin in css. Niente da fare, c'è sempre quel margine inferiore.

    Come faccio?


  • Super User

    Ciao 🙂

    Prova ad azzerare per margin, paddin e border.

    :ciauz:


  • User Attivo

    Macchè, ho semplificato al massimo la pagina per capire l'errore ma non c'è verso di togliergli quello spazio.
    [html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <img src="grafica/pr_it_1x1.jpg" width=161 height=81 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;"><br>
    <img src="grafica/pr_it_2x1.jpg" width=161 height=71 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;"><br>
    <img src="grafica/pr_it_3x1.jpg" width=161 height=70 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;"><br>
    <img src="grafica/pr_it_4x1.jpg" width=161 height=72 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;"><br>
    <img src="grafica/pr_it_5x1.jpg" width=161 height=81 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    </body>
    </html>

    [/html]


  • User Attivo

    E neanche così (se qualcuno avesse il dubbio che è colpa dei <br>)
    [HTML]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div style="width: 161px">
    <img src="grafica/pr_it_1x1.jpg" width=161 height=81 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    <img src="grafica/pr_it_2x1.jpg" width=161 height=71 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    <img src="grafica/pr_it_3x1.jpg" width=161 height=70 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    <img src="grafica/pr_it_4x1.jpg" width=161 height=72 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    <img src="grafica/pr_it_5x1.jpg" width=161 height=81 border=0 style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none;">
    </div>
    </body>
    </html>
    [/HTML]


  • Super User

    Ciao, io ho semplificato ulteriormente il codice per fare delle prove, ma alla fine ho trovato il problema con una ricerca su google.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
    <html>
    <head>
     <title></title>
    </head>
    <body>
    <div style="width:161px;">
    <img src="1.JPG" width="161" height="70" border="0" style="padding:0; margin:0; border:0; display: block;">
    <img src="2.JPG" width="161" height="70" border="0" style="padding:0; margin:0; border:0; display: block;">
    </div>
    </body>
    </html>
    ```La soluzione migliore è usando il display:block;

  • User Attivo

    Mi fa ancora un effetto strano, però è una soluzione accettabile. Che palle Firefox...

    Grazie mille dell'aiuto.


  • User

    Ciao.

    Poiche' parli di tabelle, credo che come ho scritto io dovrebbe fungere anche su Firefox, se cosi' non fosse scusami per averti fatto perdere tempo a provare.
    Se tutto dcvesse andare a buon fine, ti formatterai la tabella via css... io ho dato la larghezza al 100%... ru inserirai le giuste. Ciao.

    [html]
    <div align="">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
    <tr>
    <td width="100%" align="left"><img border="0" src="grafica/pr_it_1x1.jpg" width="161" height="81"></td>
    </tr><tr>
    <td width="100%" align="left"><img border="0" src="grafica/pr_it_2x1.jpg" width="161" height="71"></td>
    </tr><tr>
    <td width="100%" align="left"><img border="0" src="grafica/pr_it_3x1.jpg" width="161" height="70"></td>
    </tr><tr>
    <td width="100%" align="left"><img border="0" src="grafica/pr_it_4x1.jpg" width="161" height="72"></td>
    </tr><tr>
    <td width="100%" align="left"><img border="0" src="grafica/pr_it_5x1.jpg" width="161" height="81"></td>
    </tr>
    </table>
    </div>
    [/html]


  • Super User

    Non è un problema di tabelle, ma proprio di margini inferiori inseriti da Firefox alle immagini delle pagine xhtml.


  • User

    Ciao Claudio.

    Il titolare del t-hread usa h-tml e non x-html (perdona il trattino ma provo a vedere se il f-orum non li trasformi in l-ink). Addirittura un Doc-T-ype h-tml 4.01 Transitional (sbagliato dovrebbe essere EN e non IT) e senza uri di riferimento.
    Da qui ho usato un codice sporco e deprecato ma che ancora va.

    Se inserisce le quattro immagine in quel modo con quel codice deprecato non avra' a video il pixl di margine inferiore nemmeno in Firefox. In seguito lo aggiustera' come meglio crede con i c-s-s-

    Nel codice sopra ho inserito nel div un align="" solo per ricordare all'amico che puo' formattarsi il div come vuole tramite C-s-s e quindi assegnare un id.

    Come mi insegni, e' superfluo anche il deprecato l'align="left" nel t-ag td, anche perche' tutto di default va a sinistra, ma e' un riicordare che puo formattare anche quella parte come meglio crede, cosi' come puo' inserire, se necessario, l'align o il moderno float direttamente al t-ag img.
    Non per ultimo se l'amico volesse editare sulle immagini li potrebbe inserire anche come sfondo.

    Se l'amico ci fornisse le quattro immagini proveremmo anche noi. 🙂 🙂

    Edit per altri l-ink... 🙂 🙂


  • Super User

    Ciao eqz 🙂

    Devo dire che quel IT nel Doctype non l'avevo visto.

    Hai pienamente ragione, anzi forse ne hai di più di quanto tu creda.

    Semplicemente perché inserendo il doctype corretto funzionano alla perfezione anche le altre soluzioni standar, senza particolari richieste sul display.

    Ti spiego la situazione era disorientante (provando a rispondere a tanti topic non sempre si notano dettagli tipo un IT, l'importante è risolvere :1: così avevo individuato un bug probabilmente ormai risolto di Firefox (rif. http://akinas.com/pages/en/blog/firefox_image_gap/) ho pensato fosse quello. Poi visto di fatto funzionava, seppur la cosa mi sembrasse strana, l'ho presa come oro colato...

    Invece bastava semplicemente mettere EN al posto di IT.

    Ma i link al WikiGT non ti piacciono proprio?
    In fondo non fanno nulla di male, anzi aiutano chi non conosce il significato di qualche termine. 🙂

    :ciauz: