Autore Topic: Gestione della proprietà Overflow nei DIV  (Letto 4863 volte)

0 Utenti e 1 Visitatore stanno visualizzando questo topic.

Offline daygo

  • Post: 3
Gestione della proprietà Overflow nei DIV
« il: 09 Agosto 2006 14:23:55 »
Salve a tutti,
Volevo segnalare un problema nella gestione della proprietà overflow dei DIV con FF (con I.E tutto ok) nel caso in cui la proprietà height sia espressa in percentuale.

In pratica se al DIV gli assegno height: 100% e width: 100% nel momento in cui il contenuto del DIV supera le sue dimensioni, esso gestisce correttamente solo l'overflow-x.

Di seguito il codice d'esempio:

Codice: [Seleziona]
<html>
<head>
 <title>DIV Overflow</title>
</head>
<body id="bodymain">
 <table id="tb_body" width="300" height="300">
  <tr id="tr_body">
   <td id="td_body" valign="top">
     <div id="div_body" name="div_body"style="overflow-y: scroll; overflow-x: scroll; height:100%; width: 100%; position: relative; background-color: #e0e0e0">
      <table cellspacing="1px" cellpadding="0px" bgColor="#0fffff" border="0px">
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>     
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>
       <tr>
        <td style="color: #000000; text-align: center; font-size:48;" nowrap>
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
         ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz ddxzczxcz
       </td>
      </tr>
     </table>
    </div>
   </td>
  </tr>
 </table>
</body>
</head>
</html>
« Ultima modifica: 09 Agosto 2006 16:43:42 da flod »

Offline prometeo

  • Moderatore
  • Post: 2538
    • https://www.tenutamontescosso.it/
Re: Gestione della proprietà Overflow nei DIV
« Risposta #1 il: 09 Agosto 2006 14:56:46 »
Premessa la mia ignoranza inmateria, forse non funziona perchè ti basi su un attributo di table che non esiste?
Di problemi con overflow in mozilla ce ne sono parecchi (specie con auto), ma questo forse non lo è.
Ciao, Giacomo.

Offline daygo

  • Post: 3
Re: Gestione della proprietà Overflow nei DIV
« Risposta #2 il: 09 Agosto 2006 15:26:32 »
Dopo che mi hai fatto notare l'errore relativo alla proprietà height dichiarata per il tag <table> ho modificato la pagina e l'ho validata con lo standard W3C. Continua comunque a comportarsi sempre nel modo descritto precedentemente.

di seguito le modifiche apportate:

sostituita la riga:
 <table id="tb_body" width="300" height="300">
con:
 <table id="tb_body" style="width:300px; height:300px">

ed rimosso l'attributo name dal div.

grazie per la segnalazione dell'errore

Offline flod

  • Amministratore
  • Post: 15057
    • http://www.flod.org
Re: Gestione della proprietà Overflow nei DIV
« Risposta #3 il: 09 Agosto 2006 17:22:47 »
Altra annotazione a margine: non chiudi mai i <tr> che apri ;-)

Se imposti larghezza e altezza sul td (e non sulla table) mi sembra che l'overflow funzioni correttamente (ma sinceramente è una proprietà che non uso mai)

Offline daygo

  • Post: 3
Re: Gestione della proprietà Overflow nei DIV
« Risposta #4 il: 10 Agosto 2006 09:10:33 »
Ho provato a anche a impostare la proprietà height sul tag TD ma non funziona. Ho provato a sostituire il DIV con un IFRAME e funziona tutto. Il problema nel DIV si ha solo quando si imposta l'altezza con un valore espresso in %.
Ho aggirato il problema impostando l'altezza (in px), tramite una funzione in Javascript dopo il caricamento della pagina e sul resize della stessa.

Penso che sia un bug di FF.

PS: Del fatto che non chiudevo i TR me ne sono accorto dopo la publicazione del codice.

Comunque grazie

0 Utenti e 1 Visitatore stanno visualizzando questo topic.