IE ridimenziona il mio sito con allineamento centrato

**Goliath** · 04-04-2011, 11:57

ciao a tutti,

sto aggiornando il mio sito personale. www.wango.co.uk

la struttura e' molto semplice (due tabelle)

nella nuova versione ancora offline ho centrato il tutto mettendo ledue tabelle dentro un

<div id="container">

e poi aggiunto il css
}
body{text-align: center} /* centra in IE5.x */
div#container{ width: 931px;
margin: 0 auto; /* centra negli altri browser */
text-align: left; /* ripristina l'allineamento */
}

la cosa strana e che lo script funziona benissimo, ma in IE x qualche strano motivo la dimenzione del tutto aumenta leggermente. non ho provato su firefox, solo chrome

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>
<link rel="shortcut icon" href="Images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>
<style type="text/css">
body {
	background-color: #d1d1d1;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	IMG {border:0; 	background-color: #d1d1d1;
	margin-left: 0px;	
						}
}
td { vertical-align: top; }
a:visited {
	color: #FFF;

	}
body{text-align: center}   /* centra in IE5.x */
div#container{ width: 931px;
    margin: 0 auto;   /* centra negli altri browser */
    text-align: left;   /* ripristina l'allineamento */ 
	}
	
	{
background-image:url('images/background.gif');
background-repeat:repeat-x;
background-position:left top;
}

</style>
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>

</head>
<body>
<div id="container">
<table width="0" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table id="Table_01" width="634" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
	<tr>
		<td>
			[img]images/logo.gif[/img]


			[img]images/reel.gif[/img]

            
            [img]images/video.gif[/img]
         
		</td>
</tr>
</table></td>
    <td><table id="Table_02" width="297" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
		<td>
			[img]images/head-02.gif[/img]

			[img]images/text.gif[/img]

			[img]images/email.gif[/img]
       </td>
	</tr>
</table></td>
  </tr>
</table>
</div>
</body>

</html>

**Prill** · 04-04-2011, 13:58

Ciao, per centrare la tabella non hai bisogno di inserirla in un div centrato, il margin:0 auto può essere assegnato direttamente ad essa. Inoltre se hai solo due colonne pare anche inutile l'annidamento di tabelle, il codice potrebbe essere semplicemente:

codice:

<table width="931" border="0" style="margin:0 auto;" cellpadding="0" cellspacing="0">
  <tr>
    <td width="634" valign="top">
      [img]images/logo.gif[/img]

      [img]images/reel.gif[/img]
			
      [img]images/video.gif[/img]

    </td>
    <td width="297" valign="top">
      [img]images/head-02.gif[/img]

      [img]images/text.gif[/img]
			
      [img]images/email.gif[/img]

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

Se volessi invece abbandonare le tabelle potresti ricorrere a due box flottanti, un esempio grezzo:

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>
<link rel="shortcut icon" href="Images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border:0;
}
body {
	background-color: #d1d1d1;	
	text-align: center;
}
#container {
	width: 931px;
	margin: 0 auto;
	background-image:url(images/background.gif);
	background-repeat:repeat-x;
}
#colonnaSinistra {
	width: 634px;
	float: left;
}
#colonnaDestra {
	width: 297px;
	float: right;
}

</style>

</head>

<body>
<div id="container">
  <div id="colonnaSinistra">
    [img]images/logo.gif[/img]

    [img]images/reel.gif[/img]
			
    [img]images/video.gif[/img]

  </div>
  <div id="colonnaDestra">
    [img]images/head-02.gif[/img]

    [img]images/text.gif[/img]
			
    [img]images/email.gif[/img]

  </div>
<br clear="all" />
</div>
</body>
</html>

Discussione: IE ridimenziona il mio sito con allineamento centrato

Strumenti discussione

Ricerca discussione

Visualizza

IE ridimenziona il mio sito con allineamento centrato

Permessi di invio