Articoli con posizionamento dinamico e compatibilità browser

[lionel hutz]

Ciao ragazzi,
vi chiedo prima di tutto se il problema ch riscontro è legato agli editor degli articoli di joomla.
Ho necessità di inserire del testo sopra a delle immagini. Ho un codice (che incollo sotto) con cui visualizzo correttamente la pagina solo su alcuni browser e sistemi operatvi. Su altri il testo se ne va per i fatti suoi dove non dovrebbe essere. Dopo avere cercato ovunque e fatto parecchie modifiche provo a chiedere a voi.
 
 Grazie!
 
 Codice:
 
 <style type="text/css">.immagine {
 position: relative;   
 width: 100%;
 }
 h1 {
 position: absolute;
 color: #ffffff;
 font: bold 17px Trebuchet;
 padding:10px;       
 top: 247px;
 left: 850px;
 width: 100%;
 }
 h2 {
 position: absolute;
 color: #3C3C3C;
 font: 16px Verdana;
 padding:10px;       
 top: 400px;
 left: 96px;
 width: 100%;
 }
 </style>
 <div class="immagine"><img alt="testo alternativo" src="http://www.videotake.it/prova/images/foto%20prova.jpg" />
 <h1>TESTO 1</h1>
 <h2>TESTO 2</h2>

[berry]

prova con

<div style="position:relative">
<div class="immagine"><img alt="testo alternativo" src="http://www.videotake.it/prova/images/foto%20prova.jpg" />
 <h1>TESTO 1</h1>
 <h2>TESTO 2</h2>
 </div>
 Se posso ti consiglierei di utilizzare meno possibile i posizionamenti assoluti proprio per evitare questi problemi, se poi parliamo di design responsive è il peggio che si possa fare

[lionel hutz]

Intanto grazie della risposta.

In questa maniera va sicuramente meglio ma continua a vedersi diversamente a seconda dei browser e sistemi operativi usati (almeno, facendo delle prove su browserstack).
Ho provato anche ad utilizzare la percentuale "em" anzichè i pixel.

Ho modificato la posizione in relative come hai suggerito (il sito è responsive), ma in questo modo per l'altezza ho dovuto usare valori negativi (-40px pr farti un esempio).

Se conosci altri metodi o codici diversi da quello che sto usando li provo molto volentieri!

Grazie ancora

[lionel hutz]

Mi appello ancora a voi. Premetto che il codice da me proposto è solo un esempio e se avete una soluzione diversa va benissimo uguale.
L'obiettivo è creare una pagina potendo mettere del testo sopra a delle immagini e nelle posizioni che decido, facendo in modo che il sito responsive sia visualizzato correttamente su ogni browser.

Se è fattibile mi salvate!