Tabelle nidificate con IE 9

**fer000dinando** · 22-08-2011, 14:59

Salve a tutti, prima di postare ho controllato nell'archivio del forum ma non sono riuscito a risolvere il mio problema, mi chiamo Ferdinando e sono iscritto da poco.

Dunque io ho bisogno di creare una tabella nidificata per potervi poi alloggiare i vari elementi che andranno a comporre la home page del mio sito (creo un layout con tabelle e css).
Ovviamente ho bisogno che ogni tabella interna ad un'altra si adatti a quest'ultima in modo da avere una pagina omogenea e con bordi (invisibili) adiacenti.
Quando vado a visualizzare la mia pagina su chrome o firefox non ho problemi, mentre su internet explorer 9 una delle tabelle centrali (la più interna) non si adatta alla tabella genitore se non imposto alcun "height" per la colonna che la contiene, mentre se imposto l'height al 100% questa sfora e mi compare una barra di scorrimento laterale.
So che con IE 9 ci sono un pò di problemi con questi settaggi, vi prego potreste darmi una mano?
Vi ringrazio molto in anticipo.
Di seguito posto due codici di prova (e ripeto di prova per cui non rimproveratemi troppo se c'è qualcosa che manca o i css non sono settati esterni, vi assicuro che non è ciò che non fa funzionare il tutto), il primo "prova" riguarda la tabella che sfora la pagina, il secondo "prova1" invece riguarda la tabella non adattata al contesto.

codice 1 (prova1.htm)

codice:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html style=" height: 100%;">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style=" margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; height: 100%;">


<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr>

<td width="*" height="100%">
</td>



<td width="999" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">

<tr width="100%" height="155">
<td colspan="2">
</td>
</tr>

<tr width="100%" height="*">
<td>

<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="100%">
<td height="100%">

<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="100%">

<td width="169" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="*">
<td>
</td>
</tr>
<tr height="59">
<td>
</td>
</tr>
</table>
</td>

<td width="*" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr>
<td width="636">
</td>
<td width="*">
</td>
</tr>
</table>
</td>

</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>


<tr width="100%" height="25">
<td colspan="2">
</td>
</tr>

</table>
</td>

<td width="*" height="100%">
</td>

</tr>
</table>


</body>
</html>

codice 2 (prova.htm)

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html style=" height: 100%;">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style=" margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; height: 100%;">


<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr>

<td width="*" height="100%">
</td>



<td width="999" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">

<tr width="100%" height="155">
<td colspan="2">
</td>
</tr>

<tr width="100%" height="*">


<td height="100%">


<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="100%">
<td height="100%">

<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="100%">

<td width="169" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr height="*">
<td>
</td>
</tr>
<tr height="59">
<td>
</td>
</tr>
</table>
</td>

<td width="*" height="100%">
<table height="100%" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr>
<td width="636">
</td>
<td width="*">
</td>
</tr>
</table>
</td>

</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>


<tr width="100%" height="25">
<td colspan="2">
</td>
</tr>

</table>
</td>

<td width="*" height="100%">
</td>

</tr>
</table>


</body>
</html>

p.s ovviamente posto lo scheletro del layout, ciò che c'è dentro è relativo...

**Vincent.Zeno** · 22-08-2011, 15:42

@fer000dinando

questa volta correggo io...
ricorda che sei tenuto, come tutti, ad utilizzare il tag CODE per postare codice
http://forum.html.it/forum/showthrea...9#post12942979

buon lavoro

**fer000dinando** · 22-08-2011, 17:02

Mi scuso e ti ringrazio molto. La prossima volta starò attento!

Buon lavoro anche a te.

**Prill** · 22-08-2011, 18:20

Non è chiaro cosa devi fare, copiando e incollando il tuo codice la visualizzazione del browser non è il massimo.
Usare tabelle per il layout è da evitare, usare altezze in percentuale anche è sconsigliabile per i problemi che si incontrano. Comunque, se vuoi giochicchiarci un po', non so se lo schema che volevi ricostruire era quello, eccoti un esempio

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">

<!--
html, body {
	height: 100%;
	margin:0;
}
#first {
	width: 100%;
	height: 100%;background:pink
}
#one {
	height: 100%;background:yellow
}
#two {
	height: 100%;background:green
}
#three {
	height: 100%;background:white
}

-->

</style>
</head>

<body>


<table id="first" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="100%" height="20%" colspan="3"></td>
 </tr> 
 <tr>
  <td width="34%" height="70%">
   <table id="one" width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="100%"></td>
     </tr>
    </table>
   </td>
  <td width="34%" height="70%">
   <table  id="two" width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="100%"></td>
     </tr>
    </table>
 </td>
  <td width="34%" height="70%">
   <table id="three" width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="100%"></td>
     </tr>
    </table>
 </td>
 </tr>
<tr>
  <td width="100%" height="10%" colspan="3">
 </td>
 </tr>
</table>

</body>
</html>

**fer000dinando** · 22-08-2011, 19:50

Innanzitutto grazie del tuo interessamento.

Lo schema che mi serve è molto più complesso del tuo, non so tu quale browser usi, comunque posto di seguito le due pagine che ho postato prima in codice in modo che possiate aprirle direttamente dal server su cui lavoro:

prova.htm

prova1.htm

Una volta risolto il mio problema la pagina dovrebbe essere ("riempita") la seguente

pagina finale

So che usare tabelle non è il massimo, ma a me serve solo per fare progettazione e fare qualche esperimento in vista di un pò di cambiamenti, poi userò xhtml e css3...
Il problema è che IE 9 non ridimensiona per bene le tabelle nidificate una volta che si raggiunge un certo livello di nidificazione, inoltre se si aggiunge l'"height" al 100% sfora come se volesse prendersi il 100% della pagina anche se già ci sono altre righe prefissate o comunque spazi non vuoti.
Mi servirebbe capire come fare in modo che la tabella centrale si adatti alla tabella madre come tutte le altre più esterne.
Non so se mi sono spiegato, spero meglio di prima.

**Prill** · 22-08-2011, 20:39

Il problema non è explorer ma il tuo codice, anche con Firefox non si ha una visualizzazione corretta. Se vuoi che le tabelle siano rese perfettamente devi impostare precisamente le dimensioni di ciascuna cella e specificarne anche l'altezza, nella pagina che hai lincato hai un'intestazione, tre colonne centrali e un footer, nello schema che ti ho indicato hai la struttura primaria, cella unica in alto e in basso e tre colonne centrali, poi puoi inserire altro all'interno. Quello che non va è che non conviene impostare le altezze in percentuale perché l'intestazione deve avere dimensioni fisse, il footer pure e il corpo centrale comunque dovrà adattarsi al testo quindi faclmente sforerà il 100%.
Poi, non essendo quel layout particolarmente complicato, invece di scervellarsi con le tabelle, sarà più semplice usare direttamente box e css. Trovi già pronti in rete layout di quel tipo e comunque sarà sufficiente un div che contenga tutto, un div per l'intestazione, uno per il menu e poi uno per il contenuto centrale e uno per il footer. Nel div centrale costruirai le tre colonne usando il float, qui il primo tutorial che mi è capitato cercando in rete sul float http://css.maxdesign.com.au/floatuto...torial0916.htm , puoi sostituire alle larghezze percentuali una larghezza fissa.
E' il sistema più rapido, accessibile, snello e corretto nel codice
(cerca anche layout fissi a tre colonne)

Discussione: Tabelle nidificate con IE 9

Strumenti discussione

Ricerca discussione

Visualizza

Tabelle nidificate con IE 9

Permessi di invio