Layout in CSS tra Mozilla e Internet Explorer

[klode]

!!!Salve a tutti del Forum!!!

Ho scoperto da poco la straordinaria opportunità di sviluppare siti web realizzando layout senza tabelle ma con i fogli di stile CSS. Grazie alla guida trovata in questo stupendissimissimo sito, sono riuscito nel giro di pochi minuti a "spezzettare" il mio layout grafico realizzato su Photoshop in diverse immagini di sfondo fisse.
Come potete ben intuire dal titolo, ho una differenza netta di struttura finale tra il browser Mozilla e Internet Explorer. Ora vi incollo il foglio di stile:

div#container {
               width: 760px;
               min-height: 600px;
               margin: 0px auto;
               text-align: left;
               background-image: url('layout/bg.gif');
               border-width: 0 1px;
               border-style:solid;
               border-color: #000000;
              }

div#header {
	     height: 126px;
	     padding: 0;
	     margin: 0;
           }

div#logo_left {
                float:left;
                background:url('layout/logo-left.jpg') no-repeat;
                height:126px;
                width:157px;
                padding: 0;
		margin: 0;
	      }

div#logo_right {
		float: right;
		background:url('layout/logo-right.jpg') no-repeat;
                height:126px;
	        width:603px;
	        padding: 0;
		margin: 0;
	       }

div#content {
              padding: 0;
	      margin: 0;
	      height:auto;
              width:100% auto;
	    }

div#menu {
          padding: 0;
	  margin: 0;
          float: left;
	  width:169px;
          min-height:400px;
          background:url('layout/menu.jpg') no-repeat;
	 }

div#corpo {
            float:right;
	    width:591px;
	    min-height:400px;
	    background:url('layout/body.jpg') no-repeat;
	  }

div#footer {
	    float:left;
            height:103px;
  	    width:760px;
  	    background:url('layout/bottom.jpg') no-repeat;
	   }

La struttura della pagina è la seguente:

<div id="container">
   <div id="header">
      <div id="logo_left"></div>
      <div id="logo_right"></div>
  </div>
  
  <div id="content">
      <div id="menu"></div>
      <div id="corpo"></div>
  </div>

  <div id="footer"></div>

</div>

In pratica, in Mozilla i div logo-left e logo-right risultano uno affianco a l'altro, così come menu e corpo. Mentre su MSIE devo aumentare di 2pixel la larghezza del container (a causa dei bordi neri aggiunti a quest'ultimo), altrimenti me li ritrovo tutti uno sotto l'altro.

Tra l'altro, con i bordi: la lunghezza dei bordi su MSIE risulta corretto in base alla lunghezza del div#container, ovvero al variare della lunghezza del "container" varia la lunghezza dei bordi laterali. Su Mozilla, invece, risultano pari all'altezza specificata in div#container.

In pratica, quello che vorrei è un layout che sia di eguale aspetto su MSIE come su Mozilla, e magari avere dei bordi "dinamici" su Mozilla. Avevo letto di aggiungere delle specifiche per il container, tipo \width, il quale era indirizzato esclusivamente a MSIE. Ma aggiungendo questa specifica, la larghezza mi cambia anche su Mozilla!

Qui di seguito vi do il link per raggiungere la pagina web alla quale mi sto riferendo in questo topic.


Botticello


Spero di non essere stato troppo prolisso, ma almeno chiaro nel problema.




Vi ringrazio tutti!

[NetEscape]

Purtroppo IE non vede affatto le proprietà min-max/width-height. Te ne accorgi usando un editor CSS che sottolinea le differenze fra browser, come
Top Style 3.10
http://www.bradsoft.com/

Ciao

[Polley]

secondo me ci sono degli errori, ho dato un'occhiata al volo, spero di non aver sbagliato.

perchè il #container di 600px ? e se lo metti a 100% ?

nel #header dopo aver utilizzato il float, sarebbe meglio annularlo nel #content clear: both; cosi non scazza !!

idem per il #foote, non serve dargli un float, ma anullare l'effetto precedente con clear: both; e ti ritorna normale.

lo stesso per il content e per il corpo, puoi dargli un'altezza di 100% cosi occupano tutto lo spazio


puoi farlo benissimo compatibile entrambi i browser, fai delle prove !!

[klode]

Vi ringrazio davvero per le risposte! Come sempre siete così disposti, cortesi, precisi e gentilissimi!



Spero un giorno di riuscire ad aiutare qualcuno come voi avete fatto e continuate a fare (e questo ultimo topic ne è la prova!!! )





Vi ringrazio ancora una volta!!!

[klode]

dunque, effettuando il cambio da min-height ad height, impostando su #container il valore height: auto; ed applicando clear:both; al div successivo ad ogni div con il float, lo vedo perfetto su Mozilla.

Per vederlo perfetto su MSIE, invece, devo applicare clear: left; o clear: right; a seconda dei casi, all'inizio di ogni div successivo. In pratica su div#corpo devo dare clear:left; e su div#footer devo dare clear:right; per poterlo vedere correttamente anche su MSIE.

A questo punto mi vien da pensare: dovrò usare due file di fogli di stile. Uno per MSIE ed uno per Mozilla...

E' possibile, o c'è ancora qualcos'altro che si può fare???

[Polley]

Sicuramente cè qualcosa che non và, prendi spunto da qui:
http://www.constile.org/template/layout_a_tre_colonne/

[klode]

Davvero ti ringrazio tantissimo!

Grazie al link da te segnalato, ho scoperto che Internet Explorer ha un problema di "pixel" per quanto riguarda i layout in CSS. Infatti, ho dovuto ridurre il bordo di destra di un pixel in tutti gli elementi a destra.

Però poi, avevo una perfetta visione in MSIE, ma non in Mozilla! infatti il bordo di destra del #container non mi si vedeva più
Di lì ho scoperto che, data la differenza tra MSIE e Mozilla, ho aggiunto la barra "/" prima di ogni margin-right: -1px; in modo da escludere tale caratteristica dai browser Netscape/Mozilla e di applicarli solo a MSIE.



vi ringrazio tutti davvero!!!

[Polley]

secondo me stai sbattendo la testa inutilmente, come prima andava bene, dovevi sistemare i vari clear: both; una cosa che mi sono dimenticato di dirti ho visto che hai un riquadro di 760px con due bordi laterali, quindi l'area interna non è + di 760 ma 760 meno i spessori dei bordi, quindi 758 in questo caso, ovvio che i due div con il float nell'intestazione non possono stare alllineati tra di loro perchè la somma dei due è 760 invece di 758, anche mettendo un clear: both ti salta giù tutto !!!


Ricontrolla di nuovo

[klode]

infatti! ma ora è tutto ok!!!

Perfettamente ok!!!


E questo grazie a voi!!!



Siete...


MI-Ti-CI!!!

[klode]

anzi...


http://www.botticello.com/test/