Problema di posizionamento css figlio/padre/"nonno"(?)

[smigol124]

Allora non capisco perché(vedi esempio sotto) "figlio" si posiziona con l'attributo "top" in base a "container" e non in base a "padre".

Esempio:

.container{padding: 30px;
 border: 2px solid #55718C; border-radius: 0; max-width: 888px}
#padre {position: relative}
#figlio {position: absolute;
top: 0%}

<div class="container">

   <div id="padre">

      <div id="figlio">
            [contenuto]
      </div>

   </div>

</div>

se metto 0% o 0px che è la stessa cosa su "top" nel css di "figlio" esso si posiziona nel top di "container" invece che nel top di "padre"

Io vorrei una situazione così:
image-immagine-8763_54E34739.jpg
Ma invece succede questo:
Immagine.jpg

[KillerWorm]

A me il tuo codice funziona regolarmente (testato su FF CH IE9).
Presumo che il problema sia altrove.
Consiglio di verificare, sulla console web del tuo browser o sul validatore, che non ci siano particolari errori nel resto del tuo codice, che potrebbero provocare tale problema.

PS: il valore 0 può essere scritto tranquillamente senza unità di misura.

[Experiment8]

Ciao,

concordo con KillerWorm, ti faccio solo una piccola osservazione, il tuo CSS:

.container{padding: 30px;
 border: 2px solid #55718C; border-radius: 0; max-width: 888px}
#padre {position: relative}
#figlio {position: absolute;
top: 0%}

Andrebbe scritto con le appropriate chiusure sempre, è vero che non è obbligatorio, ma non tutti i browser, soprattutto i piu' datati, digeriscono il codice comunque in ogni caso:

.container{padding: 30px; border: 2px solid #55718C; border-radius: 0; max-width: 888px;}
#padre {position: relative;}
#figlio {position: absolute; top: 0;}

P.s: su che browser noti questo malfunzionamento?

[smigol124]

Il codice che vi ho fatto vedere è un riassunto perché in realtà mi trovo a lavorare sul circuito di formcommunity, uso chrome ma non credo sia un problema di browser

[Experiment8]

Beh se c'è dell'altro codice dovresti mostrarcelo, da quello che abbiamo qui si deduce che tutto funzioni bene ma probabilmente è perché, come diceva KillerWorm, il problema è altrove.

[smigol124]

Il problema è che è un bel pezzo di codice, lo metto uguale?

[smigol124]

<div id="tabella"> è il padre
<div id="listastaff"> è il figlio
e il nonno sarebbe il contenitore principale del forum

Codice HTML:

<!--TABELLA--> <br> <!-- Bordo superiore --> 
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center"> 
<div class="mtitle">United Destiny Team</div> 
</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"><tr><td class="ww"> 
<!-- Fine bordo superiore/Inizio contenuto --> 
 
<div id="tabella" style="width:830px; height: 350px"> 
 <br> 
 
 <div id="listastaff"> <!-- Lista Membri Staff --> 
 <table style="text-align:center; width:100%" cellpadding="1" cellspacing="1"> 
 <tr> 
 <td colspan="4"> 
 <span align="center" style="color:#55718C; font-size: 12pt; font-family:arial"><b>Membri  Staff</b></span> 
 </td> 
 </tr> 
 <tr> 
 <td><a class="memb" href="?act=Profile&MID=9940092">ShaedZ</a></td> 
 <td><a class="memb" href="?act=Profile&MID=10070337">shad82</a></td> 
 <td><a class="memb" href="?act=Profile&MID=9542232">jonnik32</a></td> 
 <td><a class="memb" href="?act=Profile&MID=5110878">Edo Cost 97</a></td> 
 </tr> 
 <tr> 
 <td><a class="memb" href="?act=Profile&MID=1449377">Werner</a></td> 
 <td><a class="memb" href="?act=Profile&MID=10031089">Unryuu</a></td> 
 <td><a class="memb" href="?act=Profile&MID=8953056">Nikkar</a></td> 
 <td><a class="memb" href="?act=Profile&MID=5391562">smigol124</a></td> 
 </tr> 
 <tr> 
 <td><a class="memb" href="?act=Profile&MID=10084400">Arren</a></td> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 </table> 
 </div> 

</div> 

<!-- Fine contenuto/Bordo inferiore --> 
</td></tr></table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br> 
<!-- Fine bordo inferiore -->
<!-- Fine TABELLA -->

Codice CSS:

#tabella {position: relative;}

#listastaff {position: absolute;
left: 6%;
top: 18%;
width: 30%;}

.memb {font-size: 10pt;
font-family:arial;
font-weight:bolder;}

[KillerWorm]

Anche in questo caso non riscontro irregolarità.
Ripeto, potrebbe esserci qualche problema altrove che influisce sul comportamento che descrivi.

Se possibile, posta il link alla pagina pubblica.

[smigol124]

Anche in questo caso non riscontro irregolarità.
Ripeto, potrebbe esserci qualche problema altrove che influisce sul comportamento che descrivi.

Se possibile, posta il link alla pagina pubblica.

http://destinyteam.forumcommunity.net/

[KillerWorm]

Da quel poco che ho visto mi pare che questa riga di css (sulla pagina) non venga vista

#tabella {position: relative}

Infatti dalla console web non viene applicata quella regola su tale elemento.
Non ho approfondito perché ora non posso ma è probabile che ci sia qualche errore nel css che fa saltare quella regola.