immagine alta 8 pixel, crea casini ai browser?

[doGmaI]

Buona sera a tutti

...sicuramente sono io che sbaglio qualcosa, ma...

Ho creato una pagina, tutta allineata con CSS. Tra le tante parti allineate con CSS mi son trovato a dover posizionare un'immagine con queste dimensioni 362x8 pixel

Per fare una "cosa" pulita, ho creato un DIV in questo modo

<div style="width: 362px; height: 8px; background-color: transparent; padding: 0xp 0px 0px 0px; margin: 0px 0px 0px 0px;">
[img]./img/tab_top.gif[/img]
</div>

La cosa strana è che l'immagine non si trova all'interno del DIV, ma si trova spostata di 5 pixel verso il basso, mandandomi a ramengo tutto il layout (lo so che per sistemare basta mettere un top: -5px; ma voglio evitare queste sistemazioni assurde che poi mi fanno casino con Internet Explorer 6)

Dico che l'immagine è spostata di 5 pixel perchè così mi mostra FireFox col suo FireBug (e comunque a rigor di logica dovrebbe stare perfettamente all'interno del DIV)


La pagina si può vedere qui http://www.dentistasubito.it/index2.php

Qualcuno avrebbe voglia di dargli un'occhiata e magari scoprire l'arcano?

PS: CSS e XHTML sono validati con l'apposito servizio del w3c

[Shores]

Perdonami, ma mi sembra che tu stia sparando ad un passerotto con una bomba nucleare: semplicemente, TOGLI completamente qualle div, lascia solo il tag IMG e tutto funzionerà perfettamente...

[fcaldera]

display: block; all'immagine e font-size: 0 al <div>

[doGmaI]

Originariamente inviato da fcaldera
display: block; all'immagine e font-size: 0 al <div>

Grazie tanto...

Al font-size: 0 non ci avevo proprio pensato... e si che pensavo di averle provate tutte.
Ora mi sorge una domanda però, perchè veniva inserito quello spazio? vuol dire forse che 8 pixel di altezza dell'immagine sono meno dell'altezza del carattere di default del browser e quindi mi posiziona l'immagine alla base del testo?

[Shores]

Originariamente inviato da doGmaI
Grazie tanto...

Al font-size: 0 non ci avevo proprio pensato... e si che pensavo di averle provate tutte.
Ora mi sorge una domanda però, perchè veniva inserito quello spazio? vuol dire forse che 8 pixel di altezza dell'immagine sono meno dell'altezza del carattere di default del browser e quindi mi posiziona l'immagine alla base del testo?

Esatto, ma ribadisco: hai provato la mia proposta, al massimo dando un display:block al tag IMG?

[doGmaI]

Originariamente inviato da Shores
Esatto, ma ribadisco: hai provato la mia proposta, al massimo dando un display:block al tag IMG?

La tua soluzione no, sinceramente non l'ho provata.
In realtà la pagina è un po' più complicata di quella che ho linkato

C'è un DIV che rappresenta la pagina.
All'interno di questo DIV altri due DIV che rappresentano altrettante colonne
Nella colonna di sinistra ci sono 3 "celle" (3 DIV)
Ogni DIV a sua volta contiene un'immagine sulla sinistra, e sulla destra del testo. Il testo è contornato da bordino (che non posso replicare con un BORDER=qualcosa dei CSS). Il "testo" è diviso in te pezzi: una parte superiore con un bordo, una parte centrale con il testo vero e proprio e una parte inferiore con un bordo simile a quello superiore ma di forma diversa. Non so se sono riuscito a spiegarmi. Se togliessi i DIV non saprei come posizionare esattamente l'immagine sopra alla parte di testo, in modo che il bordo destra e sinistra definito per l'area di testo, si "attacchi" perfettamente al bordo superiore e inferiore che invece è disegnato con un'immagine (quella larga 362px e alta 8px)