decentrated layout in firefox

**kesim** · 23-08-2005, 11:15

hi, i have a problem with table layout.

this is my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<LINK href="Styles.css" type="text/css" rel="stylesheet" />
</HEAD>
<body>
<form id="frmForm">
<table class="tabellaLayout">
<tr class="header">
<td colSpan="3">Header</td>
</tr>
<tr class="primaFascia">
<td class="cellaNavigatore">Navigator</td>
<td class="cellaContenuti" rowSpan="2">Content</td>
</tr>
<tr class="secondaFascia">
<td class="cellaMeteo">Weather</td>
</tr>
<tr class="footer">
<td colSpan="3">Footer</td>
</tr>
</table>
</form>
</body>
</HTML>

and this is my css:

html,body
{
padding:0px;
margin:0px;
}
td
{
border-width: 1px;
border-style: solid;
border-color:Black;
}

.tabellaLayout
{
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top:-300px;
margin-left:-400px;
margin-right:0px;
margin-bottom:0px;
}

.header
{
height: 20%;
}

.primaFascia
{
height: 50%;
}

.secondaFascia
{
height: 25%;
}

.footer
{
height: auto;
}

.cellaNavigatore
{
width: 20%;
}

.cellaMeteo
{
width: 20%;
}

.cellaContenuti
{
width: 80%;
padding-left: 30px;
padding-top: 10px;
line-height: 15px;
vertical-align:top;
}

the problem is that in FireFox the layout appears decentrated...Someone could help me?

**Zero** · 23-08-2005, 12:08

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<style>
html,body
{
padding:0px;
margin:0px;
}
td
{
border-width: 1px;
border-style: solid;
border-color:Black;
}

.tabellaLayout
{
width: 780px;
height: 600px;
margin-right:0px;
margin-bottom:0px;
}

.header
{
height: 20%;
}

.primaFascia
{
height: 50%;
}

.secondaFascia
{
height: 25%;
}

.footer
{
height: auto;
}

.cellaNavigatore
{
width: 20%;
}

.cellaMeteo
{
width: 20%;
}

.cellaContenuti
{
width: 80%;
padding-left: 30px;
padding-top: 10px;
line-height: 15px;
vertical-align:top;
}
</style>
</HEAD>
<body>
<form id="frmForm">
<table class="tabellaLayout">
<tr class="header">
<td colSpan="3">Header</td>
</tr>
<tr class="primaFascia">
<td class="cellaNavigatore">Navigator</td>
<td class="cellaContenuti" rowSpan="2">Content</td>
</tr>
<tr class="secondaFascia">
<td class="cellaMeteo">Weather</td>
</tr>
<tr class="footer">
<td colSpan="3">Footer</td>
</tr>
</table>
</form>
</body>
</html>

**kesim** · 23-08-2005, 12:16

tnx for replying, but my layout must be centered in the page. with your modification it appears shifted to the left. it's not my intention. how can i do?

**Zero** · 23-08-2005, 12:26

Try now..

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<style>
html,body
{
text-align: center; /* alinea il box con IE */
padding:0px;
margin:0px;
}
td
{
border-width: 1px;
border-style: solid;
border-color:Black;
}

.tabellaLayout
{
width: 780px;
height: 600px;
margin-right:0px;
margin-bottom:0px;
margin: auto; /* alinea il box con i browser in modalità standard */
}

.header
{
height: 20%;
}

.primaFascia
{
height: 50%;
}

.secondaFascia
{
height: 25%;
}

.footer
{
height: auto;
}

.cellaNavigatore
{
width: 20%;
}

.cellaMeteo
{
width: 20%;
}

.cellaContenuti
{
width: 80%;
padding-left: 30px;
padding-top: 10px;
line-height: 15px;
vertical-align:top;
}
</style>
</HEAD>
<body>
<form id="frmForm">
<table class="tabellaLayout">
<tr class="header">
<td colSpan="3">Header</td>
</tr>
<tr class="primaFascia">
<td class="cellaNavigatore">Navigator</td>
<td class="cellaContenuti" rowSpan="2">Content</td>
</tr>
<tr class="secondaFascia">
<td class="cellaMeteo">Weather</td>
</tr>
<tr class="footer">
<td colSpan="3">Footer</td>
</tr>
</table>
</form>
</body>
</HTML>

**kesim** · 23-08-2005, 12:34

ok, it's simply perfect!!!!! thank you!!!

Discussione: decentrated layout in firefox

Strumenti discussione

Ricerca discussione

Visualizza

decentrated layout in firefox

Permessi di invio