Anomalia con immagini che si deformano a seconda di browser e risoluzione schermo

[danielepalmas88]

Ciao a tutti. Scusate la domanda, che presumo sia stata fatta mille altre volte in maniera molto similare, ma purtroppo sto riscontrando un'anomalia.

Sto utilizzando la stessa parte di codice css dove nel sito1 rimane invariata in forma e posizioni di immagini e testo; nel sito2 invece cambia tutto a seconda della risoluzione dello schermo, e persino dal tipo di browser.

Ho provato ad impostare la prima immagine del codice sia su relative, che su absolute, che su fixed. Ma non cambia nulla. E sono sicuro che dalla prima immagine dovrebbe dipendere che le posizioni di tutte NON varino a prescindere dalla risoluzione schermo.

Mi dareste una piccola dritta?

Grazie in anticipo.

.up { display: block; position: relative; margin: auto; }

.left { display: inline-block; position:absolute; top: 75%; left: 0; }

.right { display: inline-block; position:absolute; top: 75%; left:71.35%; }

.down { display: inline-block; position:absolute; top: 2223%; left: 0; }

.middle { display: inline-block; position:absolute; top: 830%; left: 1.5%; }

.logo { display: inline-block; position:absolute; top: 30%; left: 21.5%; }

.folder { display: inline-block; position:absolute; top: 120%; left: 3%; }

.title { display: block; font: 1.3rem/1.0 Verdana; position: absolute; top: 340%; left: 23.6%; }

.text { display: block; font: 1.05rem/1.2 Arial; color: white; position: absolute; top: 1010%; left: 2.3%; }

.moretext { display: block; font: 0.95rem/1.1 Tahoma; position: absolute; top: 1280%; left: 2.75%; }

.signup { display: block; font: 1.2rem/0.7 Arial Black; color: red; position: absolute; top: 720%; left: 32%; }

.object1 { display: inline-block; position:absolute; top: 305px; left: 32px; }

.object2 { display: inline-block; position:absolute; top: 305px; left: 171px; }

.object3 { display: inline-block; position:absolute; top: 305px; left: 309px; }

.object4 { display: inline-block; position:absolute; top: 305px; left: 448px; }

[danielepalmas88]

EDIT: Ho aggiunto un po' di codice che delimiti dei margini:

#content { float: left; width: 600px; height: 439px; }

E il 90% di immagini e scritte rimangono in posizione, a prescindere da risoluzine e browser...
...però l'immagine ".down" è ribelle, e continua invece a variare e spostarsi a seconda delle condizioni...
Uff, non ci capisco più nulla

[danielepalmas88]

Soluzione: bastava usare px anziché % nel posizionare gli oggetti.