PDA

View Full Version : Help con CSS


ScreamingFlower
10-10-2004, 22:09
Ho appena finito di testare il layout in CSS del mio prossimo sito e (a parte che rende molto meglio con Firefox, e questo me l'aspettavo :cool: ) c'è un difetto fastidioso che appare con Explorer....
Allora, ho creato un div#header che deve contenere solo il banner del sito, una jpg di 750x100 px.
Il codice dell'header è questo:

div#header{margin-top:5px;background-color:#e3e3e3;border-top : 3px double #D93735;border-bottom : 3px double #D93735}

quindi, in teoria, si dovrebbe adattare in larghezza alla dimensione della finestra (e fino a qui tutto bene) e alle dimensioni del banner in altezza.

Con Firefox questo è perfetto, la "striscia" grigia prende la stessa altezza del banner, mentre con Explorer resta una bruttissima striscia grigia di qualche pixel sotto il banner.

Ho provato eliminando i bordi colorati, segnando l'altezza precisa dell'header a 100px ma niente da fare.

Dato che non voglio si pensi che sia un errore di programmazione, come diavolo posso fare a dire a Exporer che l'header deve adattarsi esattamente a 100px???? :muro:
Spero di aver spiegato bene il problema, la pagina non è online quindi non posso farla vedere :)

VICIUS
11-10-2004, 09:28
hm sembra un problema dovuto al solito bug di explorer sul box-model. Prova a leggere qui e vedere se riesci a risolvere http://tantek.com/CSS/Examples/boxmodelhack.html

ciao ;)

ScreamingFlower
11-10-2004, 15:16
Grazie del link, è spiegato molto bene lì come risolvere la questione del box model, però temo che non sia questo il mio problema.
Ho risolto per ora in questo modo, ho messo questo nel CSS
img {display: block}
E a questo punto l'immagina rientra perfettamente nello spazio dell'header ma..... Firefox la visualizzava allineata a sinistra anzichè al centro.
Quindi nell'html ho scritto così:
<div id="header">
<div align="center">
<img border="0" src="boy.ht1.jpg" width="750" height="100" alt="banner" />
</div>
</div>
per specificare che l'immagine deve posizionarsi al centro.

Mi pare funzioni :confused: :D