Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di ubbicom
    Registrato dal
    Mar 2004
    Messaggi
    1,407

    Compatibilità browser I.E. ver. 6

    Ciao a tutti.

    Ho uno stranissimo problema con una pagina web costruita con un foglio di stile su tre colonne: una sinistra, una centrale ed una destra.

    Facendo una serie di test tra i vari browser in circolazione la pagina web si visualizza correttamente e perfettamente centrata su tutti i browser provati, tranne che su IE 6 con il quale la colonna destra ( inc_right.asp ) finisce sotto la colonna sinistra ( inc_left.asp ).

    Ho provato a cambiare la risoluzione video del pc, a cambiare alcuni dei valori ( larghezza, etc ) del foglio di stile che le tre colonne richiamano, ma non c'è stato niente da fare: su IE 6 la colonna destra ( inc_right.asp ) finisce SEMPRE sotto la colonna sinistra ( inc_left ).

    E' come se leggesse un "vai a capo" che in realtà non esiste.

    Cosa posso fare di più?
    Grazie

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924

    Re: Compatibilità browser I.E. ver. 6

    Originariamente inviato da ubbicom
    Cosa posso fare di più?
    Grazie
    sicuramente postare un link per vedere la pagina in questione

    controlla comunque:
    1) che la somma delle larghezze + padding + margin delle tre colonne non superi la larghezza del contenitore che le racchiude
    2) di aver messo anche display: inline ai vari elementi con float: left (o right) soprattutto se hanno anche un margine impostato
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di ubbicom
    Registrato dal
    Mar 2004
    Messaggi
    1,407
    Grazie x la risposta.

    Purtroppo al momento online non ho nulla, sviluppo in locale.

    Provo a postare la porzione di css che ho previsto nella terza colonna ( inc_right.asp )

    codice:
    .right {
    	background-attachment: scroll;
    	background-image: url(/casting/images/right_bg.jpg);
    	background-repeat: repeat-y;
    	margin: 0px;
    	float: left;
    	height: 665px;
    	width: 232px;
    	padding-top: 30px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 35px;
    }
    .right_textarea {
    	font-family: Arial;
    	font-size: 12px;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #464646;
    	text-decoration: none;
    	margin: 0px;
    	float: left;
    	width: 232px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    }
    .gallerypic1 {
    	background-image: url(/casting/images/gallery1.jpg);
    	background-repeat: no-repeat;
    	margin: 3px;
    	padding: 0px;
    	float: left;
    	height: 90px;
    	width: 120px;
    }
    .gallerypic2 {
    	background-image: url(/casting/images/gallery2.jpg);
    	background-repeat: no-repeat;
    	margin: 3px;
    	padding: 0px;
    	float: left;
    	height: 90px;
    	width: 120px;
    }
    .gallerypic3 {
    	background-image: url(/casting/images/gallery3.jpg);
    	background-repeat: no-repeat;
    	margin: 3px;
    	padding: 0px;
    	float: left;
    	height: 90px;
    	width: 120px;
    }
    .button1 {
    	font-family: Arial;
    	font-size: 11px;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #000000;
    	text-decoration: none;
    	background-image: url(/casting/images/viewmore.jpg);
    	background-repeat: no-repeat;
    	margin: 5px;
    	float: left;
    	height: 17px;
    	padding-top: 2px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	width: 68px;
    }
    .right_headarea {
    	font-family: Georgia;
    	font-size: 22px;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #7e8901;
    	text-decoration: none;
    	margin: 0px;
    	float: left;
    	width: 232px;
    	padding-top: 10px;
    	padding-right: 0px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    }
    E la relativa pagina web:

    codice:
    <div class="right">
         <div class="h2">Album</div>
         
         <div class="gallerypic1"></div>
         <div class="gallerypic2"></div>
         <div class="gallerypic3"></div>
         
         
         <div class="right_textarea">
           <div align="center">Foto</div>
         </div>  
         
         <div class="right_headarea">Web </div>     
         <div class="right_textarea">
    			<table border="0">
    				<tr>
    					<td class="h3">01</td>
    					<td class="h4">02</td>
    				</tr>    
    			</table>
                       
    			
        </div>          
         <div class="right_textarea">
           <div align="center">Apri</div>
         </div>
       </div>
     </div>

  4. #4
    Se il problema si presenta solo su IE6, potresti anche valutare di abbandonarlo, dal momento che sono sempre di più i soggetti che hanno eliminato del tutto il supporto a tale browser.
    Se puoi farlo o no, dipende molto dal tipo di persone che visitano il sito

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2009
    Messaggi
    7
    nel tuo css manca display:inline agli elementi che flottano per cui ie6 raddoppia il margine e le colonne cadono.
    Ciao

  6. #6
    Utente di HTML.it L'avatar di ubbicom
    Registrato dal
    Mar 2004
    Messaggi
    1,407
    Originariamente inviato da Strep
    nel tuo css manca display:inline agli elementi che flottano per cui ie6 raddoppia il margine e le colonne cadono.
    Ciao
    Grazie, ma in che punto del CSS devo dichiarare display:inline?
    Dove trovo documentazione in merito?

  7. #7
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924

    Re: Re: Compatibilità browser I.E. ver. 6

    Originariamente inviato da fcaldera
    2) di aver messo anche display: inline ai vari elementi con float: left (o right) soprattutto se hanno anche un margine impostato
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

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 © 2026 vBulletin Solutions, Inc. All rights reserved.