contenuto "accavallato" con safari e chrome

[fabio_198]

Salve ragazzi!

Ho provato a mettere online solo per fare una prova di come gira un nuovo sito, e mi è successo che con safari e chrome..il contenuto del sito è accavallato...mentre con firefox no...qualcuno mi sa dire se devo mettere qualcosa di preciso per far rispettare i paramentri?

http://imagelink.altervista.org/

[lisadamus]

I browser decodificano il codice in maniera diversa.
Prova ad usare questo hack.

/*codice css specifico per chrome e safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#divinquestione { proprietà funzionante }
}

Devi analizzare la riga di codice che in chrome e safari si accavalla, puoi utilizzare firebug, un'estensione di firefoz per trovarla. Poi apri il file css relativo ed aggiungi il codice che ti ho scritto.
Sostituisci #divinquestione con il div di riferimento e con { proprietà funzionante } in cui metti i valori che risulatno corretti per safari e chrome. Poi salvi e controlli, dovrebbe funzionare.

[fabio_198]

uhm spero di aver sbagliato qualcosa..perchè non va purtroppo

quello che da problemi è questo:

#container2{
position:relative;
width:1100px;
margin:0 auto;
}
.block{
padding: 15px;
background:#fff;
margin-bottom:10px;
line-height:1.7;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);

transition: box-shadow 1s;
-moz-transition: -moz-box-shadow 1s;
-webkit-transition: -webkit-box-shadow 1s;
}
.block:hover {
box-shadow: 0 1px 13px rgba(34,25,25,1);
-moz-box-shadow: 0 1px 13px rgba(34,25,25,1);
-webkit-box-shadow: 0 1px 13px rgba(34,25,25,1);
}

.block h3{
font-size:22px;
color:#7A8489;
margin:0 5px;
padding-bottom:5px;
padding-left:10px;
text-align:left;
text-shadow:1px 1px 0 #fff, 2px 2px 1px #ccc;
font-family:'Arial Narrow', Arial, Helvetica, sans-serif;
border-bottom:4px double #ccc;
}
.block pre{
background:#F4FAFC;
padding:15px;
margin:0 25px;
border:1px solid #ADC6D1;
line-height:1.8;
}

[fabio_198]

nessuna soluzione?

[lisadamus]

Hai trovato la soluzione?
Perché io con Chrome e Safari lo vedo perfettamente.
Se a te non succede, prova a svuotare la cache del browser.

[fabio_198]

svuotata ma non succede nulla

inoltre provando con chrome altre cose che ho aggiunto (in locale) ad esempio un box con questo css

background-image: -moz-linear-gradient(top, #eaf4f4, #b3d9d9);

tutti e due mi ignorano i colori e me lo impostano bianco di default

non capisco perchè anche per i colori

[lisadamus]

E' molto strano.
Io continuo a vedere il sito perfettamente con Safari, Chrome e Firefox, inoltre lo ho mostrato anche ad un amico e lo vede perfetto anche lui, quindi credo sia un problema del tuo pc e non del browser.
Alcune volte mi è capitato che in locale il sito funzioni alla perfezione, mentre in remoto compaiano una marea di errori. Prova il gradient in remoto e vedi se funziona.

[fabio_198]

potresti provare a rivedere il sito? ho caricato di nuovo con tutte le modifiche

strano che ti si vede bene...perchè io con safari su un macbook lo continuo a vedere tutto accavallato (i box della seconda riga in poi)

[lisadamus]

Ora lo vedo male anch'io.
Hai provato ad usare l'hack che ti ho scritto?
Dove c'è il codice css in cui dai il top dei box element.style, dovrebbe essere
element.style {
width: 229px;
left: 0px;
top: 540px;
position: absolute;
}

devi aggiungere

/*codice css specifico per chrome e safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
element.style {
width: 229px;
left: 0px;
top: 540px; /* qui metterai il valore che sposta il box verso il basso*/
position: absolute;
}
}

fammi sapere

[fabio_198]

niente non capisco proprio perchè la prima volta che lo visito con safari il layout è buono...appena aggiorno tutto accavallato...