Su firefox si su ie NO: <div></div> + css

mix.web.design

Su firefox si su ie NO: <div></div> + css

Salve ragazzi sto cercando di creare una pagina senza usare le tabelle ( almeno dove èpossibile usando solo <div></div> + css.

Ho notato che su firefox i vari livelli vengono posizionati correttamente creando in questo modo la struttura corretta, mentre su ie si sfalza tutto mi potete dare consigli perfavore?

Qu di seguito il codice html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Il Titolo Verra Assegnato Tramite Uno Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stile.css" rel="stylesheet" type="text/css">
</head>

  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="Tabella_superiore_piccola"><div align="center" class="Tabella_superiore_piccola">FAI DI SPACCIOWORD LA TUA HOMEPAGE </div>            <div align="center">
        <div align="center"><span class="Tabella_superiore_piccola">Chi siamo </span><span class="Separatori">|</span><span class="Tabella_superiore_piccola"> Contatti</span> <span class="Separatori">|</span><span class="Tabella_superiore_piccola"> Pubblicità  </span><span class="Separatori">| </span><span class="Tabella_superiore_piccola">Cupokkei</span> </div></td>

      </tr>
  </table>
</div></td>
<td width="150" class="Testo_tabella_superiore"><div align="center"></div>            <div align="center" class="Tabella_superiore_B">Sabato 1 aprile 2006 19:53</div></td>
<td class="Testo_tabella_superioreB"><div align="center" class="Testo_tabella_superioreB">
  <div align="left" class="Testo_tabella_superioreB"></div>
</div>            
  <div align="left">

    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="46%" class="Testo_tabella_superioreB">Utenti connessi: </td>
        <td width="54%" class="Testo_tabella_superioreB">100</td>
      </tr>
      <tr>
        <td class="Testo_tabella_superioreB">Utenti iscritti: </td>

        <td class="Testo_tabella_superioreB">2800</td>
      </tr>
    </table>
  </div>
<div align="left"></div></td>

</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr class="Bordo_celeste_right">

<td width="167" class="Bordo_celeste_left">![image](img/logo_piccolo_celeste_commun.gif)</td>
<td width="633" class="Bordo_celeste_right"> <div align="center"><span class="Tabella_bianca">Home </span><span class="Separatori_b">|</span><span class="Tabella_bianca"> MSG Boardi</span> <span class="Separatori_b">|</span><span class="Tabella_bianca"> Agor&agrave; </span><span class="Separatori_b">| </span><span class="Tabella_bianca">MMS</span><span class="Separatori_b">| </span><span class="Tabella_bianca">Agenda</span><span class="Separatori_b">| </span><span class="Tabella_bianca">Blog</span><span class="Separatori_b">| </span><span class="Tabella_bianca">Download</span><span class="Separatori_b">| </span><span class="Tabella_bianca">Free-Time</span><span class="Separatori_b">| </span><span class="Tabella_bianca">FAQ</span></div></td>

</tr>
</table>
<div id="sharednetwork">
<div class="shared-label-network"> » Menu User </div>
<div class="shared-content-network">
My Page
Modifica Dati
Cambia E-mail

Cambia Password
Lista Preferiti
Lista Nera
PQuiz
<div class="shared-label-network"> » Messaggi</div>
Ricevuti
Inviati
Inviti

<div class="shared-label-network"> » Profilo </div>
Visite Profilo
Foto Profilo
Album Personale
<div class="shared-label-network"> » Servizi </div>
Lista Spacciatori
Lista Spacciatrici

Chatt Cancella Account </div>
</div>
<div id="Menu-publico">
<div class="shared-label-network"> » Last User </div>
<div class="menu-user">
<ul>
<li type="circle">Maria

<li type="circle">Mario

<li type="circle">Maria

<li type="circle">Mario

<li type="circle">Maria

</div>
<div class="shared-label-network"> » Connessi </div>
<div class="menu-user">
<ul>
<li type="disc">Maria

<li type="disc">Mario

<li type="disc">Maria

<li type="disc">Mario

<li type="disc">Maria

</div>
<div class="menu-user">Tutti i Connessi</div>
<div class="shared-label-network"> » Ricerca </div>
<div class="menu-user">
<div align="left">Nick:

  <input type="text" size="15" maxlength="20">

  

  

  <input name="" type="radio" value="">
  Uomo

  <input name="" type="radio" value="">
  Donna

  

  <input name="" type="checkbox" value="">

  Con Foto

Cerca</p></div>
</div>
<div id="Barra-consigli">
<div class="shared-label-network">
<div align="center">MSG BOARD </div>
</div>
</div>
</div>
</body>
</html>

Qui di seguito il codice del css:

/* CSS Document */

.Sfondo&#123;
background-color:#c1ddf9;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;10px;
font-weight&#58;normal;
color&#58;#999999;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

.Tabella_superiore_A&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;10px;
font-weight&#58;normal;
color&#58;#FFFFFF;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

.Tabella_superiore_piccola&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;10px;
font-weight&#58;normal;
color&#58;#FFFFFF;
&#125;

.Tabella_superiore_piccola&#58;hover&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;10px;
font-weight&#58;normal;
color&#58;#FF1E00;
&#125;

.Tabella_superiore&#123;
background-color&#58;#7eb8f2;
&#125;

.Separatori&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;8px;
font-weight&#58;normal;
color&#58;#FFFFFF;
&#125;

.Testo_tabella_superiore&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#FFFFFF;
&#125;

.Testo_tabella_superioreB&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#FFFFFF;
padding-left&#58;8px;
&#125;

.Testo_tabella_Bsuperiore&#123;
background-color&#58;#FFFFFF;
border-right&#58; 1px solid #7EB8F2;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7eb8f2;
padding-left&#58;8px;
&#125;

.Testo_tabella_g&#123;
background-color&#58;#FFFFFF;
border-right&#58; 1px solid;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7eb8f2;
padding-left&#58;8px;
&#125;

.Testo_tabella_g_fine&#123;
background-color&#58;#FFFFFF;
border-bottom&#58;1px solid;
border-right&#58; 1px solid;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7eb8f2;
padding-left&#58;8px;
&#125;

.Testo_tabella_Bsuperiore&#58;hover&#123;
background-color&#58;#7eb8f2;
border-right&#58; 1px solid;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#FFFFFF;
padding-left&#58;8px;
&#125;

.Testo_tabella_superiore_fine&#123;
background-color&#58;#FFFFFF;
border-bottom&#58;1px solid;
border-right&#58; 1px solid;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7eb8f2;
padding-left&#58;8px;
&#125;

.Testo_tabella_superiore_fine&#58;hover&#123;
background-color&#58;#7eb8f2;
border-right&#58; 1px solid;
border-left&#58; 1px solid;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#FFFFFF;
padding-left&#58;8px;
&#125;



.Tabella_bordino&#123;
background-color&#58;#7eb8f2;
border-top&#58;3px solid white;
&#125;

.Tabella_bianca&#123;
background-color&#58;#FFFFFF;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7EB8F2;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

.Tabella_bianca&#58;hover&#123;
background-color&#58;#FFFFFF;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#FF1E00;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

.Separatori_b&#123;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#7EB8F2;
&#125;

.Bordo_celeste_left&#123;
border-bottom&#58;1px solid;
border-left&#58; 1px solid;
&#125;

.Bordo_celeste_right&#123;
border-bottom&#58;1px solid;
border-right&#58; 1px solid;
&#125;

.menu_blu&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;10px;
font-weight&#58;normal;
color&#58;#999999;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

.Menu&#123;
background-color&#58;#7eb8f2;
font-family&#58;tahoma,arial,verdana,helvetica;
font-size&#58;12px;
font-weight&#58;normal;
color&#58;#ffffff;
font-weight&#58; bold;
text-decoration&#58;none;
letter-spacing&#58;2px;
&#125;

#sharednetwork &#123;
	position&#58; absolute;
	left&#58; 814px;
	top&#58; 8px;
	z-index&#58; 2;
	width&#58; 124px;
background-image&#58;url&#40;img/sfondo.gif&#41;;
	&#125;
.shared-label-network &#123;
	font&#58; 11px Verdana, Arial, sans-serif; 
	color&#58; #ffffff;
	font-weight&#58; bold;
	display&#58; block;
	background-color&#58;;
	padding&#58; 1px 3px 2px 6px;
	&#125;
.shared-content-network a &#123;
    display&#58; block;
	font&#58; 11px Verdana, Arial, sans-serif;
    padding&#58; 1px 3px 2px 6px;
    text-decoration&#58; none;
	color&#58;;
	&#125;
.shared-content-network a&#58;hover &#123;
	font&#58; 11px Verdana, Arial, sans-serif;
	text-decoration&#58; none;
	color&#58;;
    background-color&#58;;
	&#125;
#Menu-publico &#123;
	position&#58; absolute;
	left&#58; 10px;
	top&#58; 80px;
	z-index&#58; 2;
	width&#58; 124px;
background-image&#58;url&#40;img/sfondo.gif&#41;;
&#125;
.menu-user&#123;
    display&#58; block;
	font&#58; 11px Verdana, Arial, sans-serif;
    padding&#58; 1px 3px 2px 6px;
    text-decoration&#58; none;
	color&#58;;
	&#125;

a&#58;link &#123;
	text-decoration&#58; none;
&#125;
a&#58;visited &#123;
	text-decoration&#58; none;
&#125;
a&#58;hover &#123;
	text-decoration&#58; none;
&#125;
a&#58;active &#123;
	text-decoration&#58; none;
&#125;
.Stile1 &#123;color&#58; #FFCCFF&#125;

#Barra-consigli &#123;
position&#58; absolute;
	left&#58; 134px;
	top&#58; 0px;
	z-index&#58; 2;
	width&#58; 666px;
background-image&#58;url&#40;img/sfondo.gif&#41;;
&#125;

Per vedere tutto caricato online http://www.spaccioworld.com/community2/index.htm

Chissa quale tag rovina tutto su ie.

Grazie mille a tutti in anticipo

claudioweb

Dipende dallo spazio lasciato tra il browser e l'inizio del body differente, la soluzione è farlo uguale per entrambi:

   body &#123;
   padding-top:0;
   margin-top&#58;8px;
&#125;

(o comunque adattarlo a quel top: 8px; di #sharednetwork)

Comunque ci sono altri errori
Tipo Tabella_superiore_B non esiste nel css.

castello, città di oria, rioni, torneo, sbandieratori, notizie oria, [url=http://www.oria.info/]oria, medievale, [url=http://dmoz.org/World/Italiano/Regionale/Europa/Italia/Puglia/Provincia_di_Brindisi/Localit%c3%a0/oria]categoria di oria

mix.web.design

Ok grazie.

Ho notato anche che con ie viene sballato la spaziatura del menù a sinistra non riesco a capire perchè-

Su firefox si su ie NO: &lt;div&gt;&lt;/div&gt; + css

Su firefox si su ie NO: <div></div> + css