PDA

View Full Version : [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?)

<!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
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
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:

<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:

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 ç°°§çé?*:incazzed:
Cionno
26-10-2007, 22:06
sono disposto anche ad abbracciare soluzioni javascriptt
Mark75
01-11-2007, 00:52
sono disposto anche ad abbracciare soluzioni javascriptt

Ecco una soluzione javascript, guarda se ti piace. Per praticità ho usato jquery, scaricalo da quà (http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js).



<!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>