[Html] problema xhtml 1.0 e tablelle

Cionno · 25-10-2007, 09:52

tabella 3 righe 1 colonna height 100%
prima riga 100px
seconda libera
terza 40px

il problema è che ie (sia 6 che 7) sballa non mantenendo le altezze in pixel specificate mentre opera e FF visualizzano correttamente

vorrei evitare i quirks mode...
qualcuno ha soluzioni? (oltre denigrare pubblicamente IE?)

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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body { margin:0; height:100%; width:100%; color:#fff; background: #00FFFF}
#as{ height:100px; background:#000000}
#ad{ background:#FF3366; height:auto;}
#af{ background:#CC6699; height:40px}
#tab{height:100%}

</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td valign="top" id="as">asd</td>
  </tr>
  <tr>
    <td valign="top" id="ad">asd</td>
  </tr>
  <tr>
    <td id="af">asd</td>
  </tr>
</table>

</body>
</html>

Fabiorayden · 25-10-2007, 12:15

Nel tuo caso, io applicherei gli stili ai <tr> piuttosto che ai <td>.

Cionno · 25-10-2007, 16:42

Quote:

Originariamente inviato da Fabiorayden

Nel tuo caso, io applicherei gli stili ai <tr> piuttosto che ai <td>.

provato... cmq purtroppo i risultati per ie 6 e 7 sono sballati...

Fabiorayden · 25-10-2007, 17:13

Quote:

Originariamente inviato da Cionno

provato... cmq purtroppo i risultati per ie 6 e 7 sono sballati...

Se la tabella è così "semplice", puoi provare a realizzarla con i <div>.

Questo è un esempio che ti potrebbe esser utile (nel tuo caso devi togliere la parte "main" ed allargare la colonna sinistra):

File html:

Codice:

<html>
<head>
    
    <title>Main Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="1.css" rel="stylesheet" type="text/css" />

</head>
<body>
	<div id="header">
                <!-- SPAZIO X IL TITOLO -->    
    	header
	</div>
	
	<div id="col_left">
    	
        col six
    
	</div>
	
    <div id="main">

		parte centrale
    
    </div>

	<div id="footer">

    	footer
    
    </div>
</body>
</html>

File CSS:

Codice:

div#header
{
	background-color:#FF0000;
	vertical-align:top;
	position:absolute;
	width:800px;
	height:100px;

	top:0px;
	left:0px;
    
}
div#col_left
{
	background-color:#0000FF;
	vertical-align:top;  
	position:absolute;
	width:100px;
	height:400px;

	top:110px;
	left:0px;
}
div#main
{
	background-color:#FFFF00;
	vertical-align:top;   
	position:absolute;
	width: 690px;
	height:400px;

	top:110px;
    left: 110px;
}
div#footer
{
	background-color:#FF00FF;
	vertical-align:top;
	position:absolute;
	width:800px;
	height:100px;

	top:520px;
	left:0px;
}

Cionno · 25-10-2007, 17:50

ti ringrazio ma ho già provato con i div e css ( ie visualizza correttamente solo attivando i quirks mode e perdendo ovviamente tutte le nuove caratteristiche di cui ho bisogno), purtroppo la tua soluzione mi è valida solo nel caso volessi usare delle dimensioni assolute in pixel e non in questo caso dove il layout dovrebbe essere liquido e basato sul 100% della finestra browser, in realtà posso fare a meno del footer ma il risultato dovrebbe essere questo :

http://www.cssplay.co.uk/layouts/fixit.html

con la differenza che io non voglio attivare i quirks mode (richiesti dall'esempio)

per questo stavo provando con le tabelle... ma di nuovo ie si dimostra un ammasso di ç°°§çé?*

Cionno · 26-10-2007, 22:06

sono disposto anche ad abbracciare soluzioni javascriptt

Mark75 · 01-11-2007, 00:52

Quote:

Originariamente inviato da Cionno

sono disposto anche ad abbracciare soluzioni javascriptt

Ecco una soluzione javascript, guarda se ti piace. Per praticità ho usato jquery, scaricalo da quà.

Codice PHP:


			
<!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=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript" language="JavaScript1.2" src="jquery-1.2.1.pack.js"></script>

<style type="text/css">

html, body { margin:0; height:100%; width:100%; color:#fff; background: #00FFFF;}

body { display: none;}

.as{ height:100px; background:#000000;}

.ad{ background:#FF3366;}

.af{ background:#CC6699; height:40px;}

.tab{height:100%;}



</style>

</head>



<body onload="$('#buttgo').click();$('body').fadeIn();">

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

  <tr>

    <td valign="top" class="as">asd</td>

  </tr>

  <tr>

    <td valign="top" class="ad">

        <input id="buttgo" type="button" value="Go" onclick="$('.ad').attr({height: $('#txtval').val()+''});" />

        <input type="text" value="70%" id="txtval"/>

    </td>

  </tr>

  <tr>

    <td class="af">asd</td>

  </tr>

</table>



</body>

</html>

25-10-2007, 12:15	#2
Fabiorayden Member Iscritto dal: Nov 2005 Città: Torino Messaggi: 289	Nel tuo caso, io applicherei gli stili ai <tr> piuttosto che ai <td>. __________________ Toshiba Satellite A100-926: Intel Core 2 Duo T7200, 2 GB ram ddr2, ATI MOBILITY RADEON X1600 512 MB Hypermemory (256 MB+256 MB)

25-10-2007, 17:50	#5
Cionno Senior Member Iscritto dal: Jan 2004 Città: ilopaN Messaggi: 2454	ti ringrazio ma ho già provato con i div e css ( ie visualizza correttamente solo attivando i quirks mode e perdendo ovviamente tutte le nuove caratteristiche di cui ho bisogno), purtroppo la tua soluzione mi è valida solo nel caso volessi usare delle dimensioni assolute in pixel e non in questo caso dove il layout dovrebbe essere liquido e basato sul 100% della finestra browser, in realtà posso fare a meno del footer ma il risultato dovrebbe essere questo : http://www.cssplay.co.uk/layouts/fixit.html con la differenza che io non voglio attivare i quirks mode (richiesti dall'esempio) per questo stavo provando con le tabelle... ma di nuovo ie si dimostra un ammasso di ç°°§çé?* __________________ MiniGx +++ FrEeWaRe! +++ Mercatino Usato Ultima modifica di Cionno : 25-10-2007 alle 17:52.

26-10-2007, 22:06	#6
Cionno Senior Member Iscritto dal: Jan 2004 Città: ilopaN Messaggi: 2454	sono disposto anche ad abbracciare soluzioni javascriptt __________________ MiniGx +++ FrEeWaRe! +++ Mercatino Usato

Strumenti
Mostra una versione stampabile Invia questa pagina per email