problema spazi vuoti tra i Div quando nello zoom in in Chrome o dispositivi mobili

[alejandrox86]

Salve a tutti, ho un problema che mi assale da sempre. anzi due, ma il primo e' piu comune.
come vedete dall'immagine che ho allegato, nel punto 1 mi si viene a creare uno spazio tra i div al momento dello zoom con chrome o con altri broswer o dispositivi mobili. lo spazio e il numero di questi spazi varia a seconda del broswer o dispositivo.
ho provato a mettere i margini a -1px ma vengono sfalsati a loro volta. chi mi sa dire come posso risolvere il problema?

un altro problema non inerente al titolo del post e' quella strana cosa al punto 2 che non riesco a spiegarmi da cosa possa dipendere.

il sito e' caricato con wordpress.

grazie mille in anticipo

[Prill]

Ciao, le immagini dicono poco, meglio vedere la pagina all'opera (se puoi inserisci un link)

[alejandrox86]

ecco qui il sito
http://www.misterlife.com/
sto notando che con firefox e' tutto ok durante lo zoom sia per gli spazi tra i div e quel cosino al punto 2.
con chrome nello zoom spuntano fuori quei spazi, e cosi anche con explorer in maniera piu attenuata e uniforme. sto provando un po di settaggi in css, non sono un esperto. vi incollo la parte CSS, e' un po sporca perche sto facendo delle prove:


/* begin MenuItem */


.menu-item-83 a {

position:absolute;

display: inherit;

height:83px;

width:124px;

padding:0px;

margin-left:4px;

outline:none;

text-indent:-9999px;

background-image:url('images/home2.png');
}


.menu-item-69 a {

position:absolute;
display: inherit;

height:83px;

width:90px;

padding:0px;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/about2.png');

overflow:hidden;

clear: both;

border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
position: static;
}



.menu-item-63 a {

position:absolute;

display: inherit;

height:83px;

width:104px;

padding:0px;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/locind2.png');
overflow:hidden;
border: 0px;
clear: both;
}



.menu-item-62 a {

position:absolute;

display: inherit;

height:83px;

width:178px;

padding:0%;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/resou2.png');
overflow:hidden;
border: 0px;
clear: both;
}



.menu-item-82 a {

position:absolute;

display: inherit;

height:83px;

width:177px;

padding:0%;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/photo2.png');
overflow:hidden;
border: 0px;
clear: both;
}



.menu-item-60 a {

position:absolute;

display: inherit;

height:83px;

width:89px;

padding:0px;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/interviews.png');
overflow:hidden;
border: 0px;
clear: both;
}



.menu-item-59 a {

position:absolute;

display: inherit;

height:83px;

width:98px;

padding:0px;

margin: 0px;

outline:none;

text-indent:-9999px;

background-image:url('images/where2.png');
overflow:hidden;
border: 0px;
clear: both;
}




.menu-item-58 a {

position:absolute;

display: inherit;

height:83px;

width:132px;

padding:0px;

margin right: 4px;


outline:none;

text-indent:-9999px;

background-image:url('images/contact2.png');
overflow:hidden;
border: 0px;
clear: both;
}

[Prill]

Correggi gli errori presenti nel css (http://jigsaw.w3.org/css-validator/), hai dichiarazioni che vengono saltate del tipo:

.art-nav-outer{

   ...omesso...
 
   background-color: 
   margin: 0px;
   padding: 0px;

quel margin è all'interno del background. Da qualche altra parte hai un margin:12; invece di margin:12px;

Il problema che hai potrebbe dipendere da queste sviste.

[alejandrox86]

ciao, ho sistemato tutti i problemi del file style.css ma non mi risolve i 2 problemi esposti.
non so proprio dove andare a parare dato che le pagine sono in php di wordpress...
come posso fare? help

[Prill]

Quei template hanno un codice sporchissimo. Per risolvere semplicemente, senza andare a metterci mano (che sarebbe più semplice e veloce riscrivere daccapo che modificare), puoi unificare in una sola immagine gli sfondi dei link, ottenendo quello che sarà l'immagine di sfondo dell'elenco (vedi immagine allegata, forse da ritagliare un po' di più), eliminando gli sfondi sui singoli link. Se anche i collegamenti si sposteranno di uno o due pixel, non si noterà

[Prill]

avevo dimenticato di allegare l'immagine

[alejandrox86]

ottima idea!! non so come non ho fatto a pensarci prima. ora quel problema e' risolto. non so come ringraziarti.
il problema si presenta anche tra le due Div che formano l'header (art-header e art-nav-outer)
ma credo che risolvero' con lo stesso sitema unendo il tutto in un unica immagine.
non capisco perche accade cio'...
l'altro problemino di quell'immagine rotta che si vede nel'angolo in alto a sinistra credo che non sia nel folgio .css ma altrove. riesci a capire dove sta il problema? grazie in anticipo

[Prill]

Non riesco a a capire quale sia l'immagine mancante, la web developer toolbar, componente aggiuntivo di Firefox (che potresti installare per fare controlli sulle tue pagine), mi segnala 8 immagini interrotte (che sono però le immagini che usavi singolarmente per i link della barra di navigazione in alto).

Magari qualcun altro saprà dirti, io non riesco a identificarla.

Per quanto riguarda gli spazi non graditi, considera che sarebbe utile azzerare margini e padding su tutti gli elementi

* {margin:0; padding:0}

e ripristinarli coi valori voluti dove servono