Topic: Help:problemi visualizzazione tab con firefox

[mindal]

Salve ragazzi!
Non so se è capitato anche a voi ma ho riscontarto dei problemi con la visualizzazione delle tab che ho creato con un css:

div#header{
   width:100%;
   height:120px;
   background-image: url(img/header.gif);
   background-repeat: no-repeat;
   background-position: top center;
   text-align:center;
}

Praticamente Firefox, a differenza di Explorer, mi sposta l'immagine dell'header che fa da sfondo alle tab, tanto che dovrei correggere l'height impostandolo a un'altezza di 80px.e la cosa ricade sul sottomenu.

Se non vi è chiaro vi lascio questo link http://www.debba.it/fog/template.htm
così potrete vedere la differenza tra Firefox ed Explore.

Spero mi possiate aiutare.
Grazie!!

[indigo]

ciao!

cioè vuoi dire che FF lascia uno spazio di ca 15px tra l'inizio della pagina e l'header? (perchè dici tab?)

le differenze che vedo sono questa e che IE restringe i contenuti.

L'immagine non mi sembra spostata, ma l'header è rimpicciolito..

dimmi se sono questi i problemi..

p.s. metti alla fine gli antipixel del W3C perchè ora come ora non sono veritieri.....

IE:


FF:


---edit--

dando un veloce sguardo al tuo css, mi sembra che FF interpreti correttamente il foglio di stile..

p.s.s spostare in "evangelizzazione"?

[mindal]

Ah pensavo si chiamassero tab oppure dovrei dire pallets?
In ogni caso si è come dici tu...ma come faccio ad allineare e a centarare, le pallets all'header come in Explorer?

Si perchè sto costruendo un sito che vorrei fosse visualizzato correttamente anche da chi non usa Explorer come me.
Dici che è possibile?

Grazie!

[indigo]

Va bene tabs!!! (non avevo capito io, sorry  )

fai bene a cercare di rendere il sito cross-browser..

mò ci penso e vedo un pò...

comunque te lo vuoi rendere in FF uguale a come lo si vede con IE, giusto? (per avere un riferimento...)

[mindal]

Si esatto come si vede in IE.

Sara la prima volta che scrivo su un forum ma non m'immaginavo foste così gentili!

Cavolo grazie grazie mille! 

[Underpass]

Sposto in Evangelizzazione

[M@htte0]

Secondo me dovresti postare tutto il CSS, così a occhio, il problema è della "libera" interpretazione che dà IE del box model.

Ti conviene aggiustarlo per FF, perchè con IE7 i CSS conosceranno una terza interpretazione (pare più fedele agli standard).

Ciao.

[indigo]

per il margine superiore il problema sembra essere il tag "h1"

è elemento di bloco e crea il margine..

si risolve inserendo nel css questa stringa

Codice: [Seleziona]

h1{ color:#FFFFFF;
display: inline;}
display:inline fa si che FF lo consideri elemento inline e non block..

p.s. vado per esperienza, non per sapere, quindi magari sbaglio...se altri corregono, sono benvenuti...
---

per qunato riguarda l'altezza, la differenza è che IE considera parti dell'elemento anche i margini e il padding (che qua erano creati da h1) per cui sembra più alto..invece FF, che interpreta i CSS correttamente, assegna il valore di altezza che hai indicato te: 120px..se vuoi un'alteza maggiore devi cambiare il valore..

---

per annullare lo spazio tra tab e sottomenu usi display: inline su div#sottomenu ul, direi..però così mangi tutto il margine tra i due div...

---
per la centratura modifichi nel css l'id "menu:

Codice: [Seleziona]

div#menu{
....
        margin-left: 40px;
}

[mindal]

Indigo sei fantastico!
Non immagini quanto mi sei stato d'aiuto non
so come ringraziarti!

Questa comunità è fantastica


Grazie mille, grazie a tutti per il supporto e la partecipazione, mi avere rallegrato la giornata!!!

Mindal

[indigo]

e per lo spazio tra tab e sottomenu usi display:inline in div#sottomenu ul, direi, ma si mangia tutto lo spazio tra i due div...

prego! è un piacere aiutare...
in futuro troverai un aiuto più qualificato su html.it per quanto riguarda i problemi di CSS e HTML!

ciao!

(per un collega giurista questo ed altro.... )

[mindal]

Cavolo ragazzi adesso ho un'altro problema...pensavate di esservi liberati di me ...
Ho provato iscrivermi su html.it per scrivere nel forum del css ma non so per quale motivo non mi hanno ancora attivato perciò vengo a rompere voi.

Dopo le correzioni che mi avete suggerito si è verificato un'altro problema ovvero non riesco a posizionare gli Ad sense di google, sia su FF che su IE.Dove su FF si spostano a destra, mentre su IE vanno a finire sotto i sottomoenù:

http://www.debba.it/fog/template.htm

Non so se può essere d'aiuto ma questo è il css in questione:

Codice: [Seleziona]

display:inline/* CSS Document */

html,body{ margin: 0;padding:0}

body{font-family: arial,sans-serif;font-size: 76%;
  background-color:#E6ECFF;}


h1{ color:#FFFFFF;
display: inline;}
 
div#container{ width:1000px;}

div#header{
width:100%;
height:80px;
background-image: url(img/header.gif);
background-repeat: no-repeat;
background-position: top center;
text-align:center;
}
div#menu{
width:100%;
height:32px;
margin-left: 20px;
text-align:center;
position:relative;
top:0px;
}

#sottomenu{
width:100%;
background-color:#ACC2FF;
height:33px;
position:relative;
top:0px;
}

div#content{
width:100%;
text-align:justify;
}

div#adv1{float:center;

padding: 1em 0 0 10px;
text-align:center;}
div#adv2{float: left;
display:inline;
padding: 1em 0 0 10px;
}

div#adv3{float: right;
display:inline;

padding: 1em 5px;
}

div#testo{float:center;

padding: 0px 10px 0px 10px;

}

div#footer{
clear:both;
height:100px;
background-image:url(img/fondo_footer_vert.gif);
background-repeat: repeat-x;
background-position:top left;

}

/* *********************************************************************menu*********** */
div#menu ul{ padding: 0;
list-style-type: none;
line-height: 36px;
}
ul.menu li{
width:118px;
height:32px;
background-image: url(img/tab_dietro.gif);
background-repeat: no-repeat;
background-position: center;
text-align: center;
  float:left;   /*non cancellare!!!*/
}
ul.menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}

ul.menu a:hover{
text-decoration: none;
color: #FFFFFF;}

ul.menu li#activelink1{
text-decoration: none;
margin-bottom:10px;
padding: 0;
width:118px;
height:32px;
background-image: url(img/tab_dav.gif);
background-repeat: no-repeat;
background-position: center;
}


/* *********************************************************************sottomenu*********** */
div#sottomenu ul{ padding: 0;
display:inline;
list-style-type:  none;

}
ul.sottomenu li{ display: inline; margin: 0 0 0 2em;padding: 0; line-height: 35px;
text-align: center;
}
ul.sottomenu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}

ul.sottomenu a:hover{
text-decoration: none;
color: #FF0000;}

ul.sottomenu li#activelink2{
text-decoration: underline;
margin-bottom:10px;
padding: 0;
height:32px;
}

/******************************************************* font ************************/
h1{ color:#FFFFFF;}
h2{ color:#FF0000;
font-size:16px;}
.testo{color:#000000;
font-size:12px;}
.testo a{text-decoration:underline;}
.testo a:hover{color:#FF0000;}

Spero non pensiate che me ne stia aprofittando
Grazi mille in ogni caso
Mindal


edit Underpass: meglio se usi il tag "codice" in questi casi

[indigo]

html.it ha problemi di manutenzione in questi gorni e quindi è attivo a sprazzi..

attento che con IE ora si vede tutto male!!

un altro consiglio è quello di postare solo le parti di codice interessate dal problema, perchè così è più facile analizzarle..

mò vedo..

[mindal]

Si hai perfettamente ragione ho combinato un casino!
Me ne rendo conto, ma avevo paura che il problema potesse avere a che fare con una parte del codice che magari avrei tranquillamente trascurato...

Un saluto

MINDAL

[indigo]

hai risolto?

[mindal]

No purtoppo no...
Sono quasi afflitto.
Se continuo così mi sa che dovro cambiare template, non posso farne uno che si vede in un modo su FF e in un altro su IE...

Cmq sia grazie ragazzi nonostante tutto mi avete dato una grossa mano, adesso capisco molte più cose!