Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Problema Layout: Firefox Vs IE

    Salve a tutti.
    Da un po' di giorni ho iniziato a studiarmi i manuali sui CSS presenti su HTML.it, in particolare quello sul layout. Ho quindi iniziato a ricostruire da capo il mio intero sito, testandolo su Mozilla Firefox e Internet Explorer.
    Mentre sul primo non vi sono problemi, nel secondo l'intero blocco centrale contenente i testi viene spostato sotto a quello laterale di navigazione.

    La composizione della pagina è la seguente:
    HEADER: occupa tutta la parte superiore
    COLONNA SINISTRA DI NAVIGAZIONE: float sinistro, larga 150px
    COLONNA DESTRA PRINCIPALE: float contiene il testo*
    FOOTER: occupa tutta la parte inferiore.

    *In questa colonna inoltre erano presenti alcune tabelle, che ho pensato a loro volta di realizzare con i CSS. Le tabelle sono ora costituite da:
    LEFT: parte alta sinistra (con immagine di background)
    MIDDLE: parte alta centrale (con immg. di background)
    RIGHT: parte alta destra (con immg. di background)
    TEXT: parte centrale in cui è presente il testo
    FOOTER_TABLE: parte finale (con immg. di background)

    Il CSS che utilizzo è questo, realizzato prendendo spunto da quello presente nella guida su Layout:

    codice:
    div#container{                   /* blocco che contiene tutta la pagina */
    	position:relative;
        width: 980px;
        margin: 0px auto;   /* centra negli altri browsers */
        text-align: left;   /* ripristina l'allineamento */
    }
    
    div#header{                      /* header pagina */
    	height: 101px;
        background: url(images/Top.png);	
    }
    
    div#navigation{ 		/*Posizione menu e larghezza */
        clear: left;
        float: left;
        width: 150px;
        background: url(images/Base.png);	
        text-align: center;	
    }
    
    div#content{    		 /* I contenuti saranno spostati di 155 pixel da sinistra */
        clear:right;
        margin-left: 155px;
    }	
    
    #left{				/* Parte sinistra tabelle dei contenuti */
    	float: left;
    	height:100%;
    	width: 6px;
    	\width:7px;
    	w\idth:6px;
    	height:27px;
    	padding: 0em 0 0 0px;
    	background-image: url(images/TitleBorderSx.png); 
    }
    
    #right{				/* Parte destra tabelle dei contenuti */
    	float: right; 
    	width: 6px;
    	\width:7px;
    	w\idth:6px;
    	height:27px;
    	padding: 0em 0 0 0px;
    	background-image: url(images/TitleBorderDx.png); 
    }
    
    #middle{  			/* Parte centrale tabelle dei contenuti */
    	margin: 0 0px;
    	padding: 0em 10px;
    	height:27px;
    	line-height: 27px; 
    	vertical-align:middle;
    	text-align: left;
    	color: #FFFFFF;
    	font-weight: bold;
    	background-image: url(images/TitleBorderCentral.gif); 
    }
    
    #text{				/* Testo tabelle dei contenuti */
    	/*clear: both;*/
    	margin: 0 0px;
    	padding: 1em 10px;
    	color: #FFFFFF;
    	background-color:#333333;	
    }
    
    #foot_table{			/* Parte finale tabelle dei contenuti */
    	/*clear:both;*/
    	height:2px;
    	background-image: url(images/FinalBorderCentral.gif); 	
    }
    
    div#footer{ 
    	clear: both; 
    	height: 23px;	
    	font-weight: bold;	
                 text-align: right;	
    	line-height: 23px;	
                 vertical-align: middle;	
                 background: url(images/Credits.png);	
    }

    Le mie domande sono:
    1. E' possibile modificando il codice fare in modo che anche in IE venga visualizzata bene la pagina? Se si, cosa c'è di sbagliato?
    2. E' giusto realizzare le tabelle per la parte del testo come ho fatto oppure ci sono metodi migliori?

    Nel caso servisse, posso lasciare anche il link alla pagina su cui sto lavorando: http://www.masterofquest.altervista.org/NEWHome2.php

  2. #2
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Devi applicare anche al div Content il float: left;


  3. #3
    Niente da fare: mettendo float:left ora il problema si presenta identico in Firefox, mentre in IE ora è tutto completamente spostato e disorganizzato... Vedere per credere

  4. #4
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Argh: è il solito problema che avevo io mentre stavo ristrutturando il mio sito (PS Molto bello il tuo, mi piace)...

    prova a togliere il margine di 155px a content...

    VEdiamo se così funziona


  5. #5
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Sto vedendo l'html del tuo sito per intero, e c'è parecchia confusione:

    i doctype sono ripetuti tre volte
    e così anche html e body
    e ci sono dei div sparsi all'interno di questo macello.

    Comincia a fare un po' di pulizia anche al codice


  6. #6
    Si, lo so... Ci sto lavorando sopra, non è ancora una versione definitiva e c'è traccia di tutto quello che utilizzavo prima.
    Prima di mettermi a pulire tutto volevo essere sicuro di riuscire a risolvere questo problema, in modo da non fare del (lungo) lavoro a vuoto.
    Neanche togliendo il margine si risolve: stessi problemi di prima.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.