Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    35

    problemi visualizzazione firefox

    Salve a tutti.

    Sono alle prime armi e sto realizzando una pagina in html collegata a un foglio di stile esterno.
    Il problema è che, nello specifico, i div denominati "nav_des" e "indirizzo" vengono visalizzati in maniera leggermente diversa da Firefox.

    Il link della pagina è il seguente: http://www.asso-casevacanze.com/antonio_giulia.html

    Il listato css è invece:

    /* Stile generico per l'elemento body */

    body {
    background : #339900;
    color : #FFFFFF;
    font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif;
    text-align : center;
    }

    /*id "sez_princ" */

    #sez_princ {
    background : #339900;
    color : #FFFFFF;
    text-align : center;
    width : 1180px;
    hight : 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -385px;
    margin-left: -590px;
    }

    /*id "contenuto" */

    #contenuto {
    background : #339900;
    color : #FFFFFF;
    margin : 0px auto;
    text-align : center;
    width : 980px;
    hight : 1000px;
    float : left;
    }

    /*id "testata" */

    #testata {
    background : #336600;
    color : #FFFFFF;
    text-align : center;
    margin : 0px auto;
    width : 960px;
    }

    /*id "proprietari" */

    #proprietari {
    color : #FFFFFF;
    font : bold 20px Arial, Verdana, Geneva, Helvetica, sans-serif;
    line-height: 35px;
    border-bottom : 5px solid silver;
    }

    /*classe immagine proprietari */

    img.imgpropr {
    float : left;
    margin-top : 3px;
    margin-right : 10px;
    margin-left : 10px;
    margin-bottom : 0px;
    }

    /*id introduzione */

    #introduzione {
    font : bold 14px Arial, Verdana, Geneva, Helvetica, sans-serif;
    margin: 0px 15px 3px 0px;
    text-align : justify;
    }

    /*id indirizzo */

    #indirizzo {
    font : bold 14px Arial, Verdana, Geneva, Helvetica, sans-serif;
    background : #336600;
    text-align : center;
    color : #FFFFFF;
    margin : -5px auto;
    width : 960px;
    line-height: 28px;
    border-top : 2px solid silver;
    }

    /*classe sez_sec */

    div.sez_sec {
    background : #99FF66;
    margin-top : 3%;
    margin-right : 0%;
    margin-left : 1%;
    margin-bottom : 0%;
    color : #FFFFFF;
    width : 960px;
    }

    /*classe navigazione_sin */

    div.navigazione_sin {
    font : bold italic 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    color : #FFFFFF;
    text-align : center;
    background : #336600;
    border: 1px solid silver;
    float : left;
    voice-family : inherit;
    width : 150px;
    }

    /*classe info */

    div.info {
    background : #339900;
    font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    color : #FFFFFF;
    text-align : justify;
    padding-bottom : 0px;
    padding-left : 10px;
    padding-right : 15px;
    padding-top : 0px;
    height : 349px;
    overflow: auto;
    }

    /*classe nav_des */

    div.nav_des {
    font : bold italic 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    margin-top : 20px;
    margin-bottom: 0px;
    color : #FFFFFF;
    text-align : center;
    background : #336600;
    border: 2px solid silver;
    voice-family : inherit;
    width : 180px;
    float : right;
    }

    /*classe siti_partner */

    span.siti_partner {
    font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: underline;
    }

    Esiste un modo per risolvere il problema??

    Grazie mille per qualsiasi aiuto.

    alx

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao, metti a posto innanzitutto il Doctype, non interpretato correttamente a causa delle virgolette errate (puoi copiare e incollare

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    )

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    35
    Ciao prill e graie per il tuo aiuto.

    Ho controllato più volte il Doctype e non sono riuscito a riscontrare problemi di virgolette.
    In ogni caso, come già premesso, non sono molto esperto e ho seguito il tuo consiglio (copiando e incollando il codice che hai postato).

    Il problema però rimane.

    Mi chiedevo se non esistesse magari un metatag o qualcosa di simile per migliorare la visualizzazione.

    Graze ancora.

    alx

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    C'erano due virgolette oblique. Ora che il doctype è a posto è segnalata una settantina di errori, fra i quali un'errata chiusura di un paragrafo che potrebbe portare a errori di visualizzazione:

    codice:
    <p id="indirizzo">Località Calma n° 22/A - Vieste - Parco Nazionale del Gargano[COLOR=orangered
    
    [/COLOR]
    ]

    sostituisci con </p>.
    Gli altri errori riguardano errate chiusure di
    (hai </br>), questi potrebbero essere ininfluenti, ma correggi tutto e poi vediamo (eventualmente puoi passare la pagina al validatore del w3c, per verificare con maggiore velocità direttamente dal browser puoi scaricare un addon per firefox che è Html validator)

  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    35
    Ciao Prill e grazie mille per i preziosi consigli.

    Ho scaricato l'addon che mi hai consigliato e ho corretto i problemi che mi hai segnalato.
    Ho validato la pagina anche tramite il w3c validator e adesso l'html sembra corretto.

    La diversa visualizzazione con firefox però continua.

    Ho provato a inserire il div "indirizzo" all'interno del div "testata" e allego l'immagine del box project dal quale sono partito (ho colorato nella pagina i div "body", "sez_princ" e "contenuto" con gli stessi colori del box).

    Di seguito il listato css con le modifiche apportate:

    /* Stile generico per l'elemento body */

    body {
    background : #333399;
    color : #FFFFFF;
    font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif;
    text-align : center;
    }

    /*id "sez_princ" */

    #sez_princ {
    background : #99CC00;
    color : #FFFFFF;
    text-align : center;
    width : 1180px;
    hight : 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -385px;
    margin-left: -590px;
    }

    /*id "contenuto" */

    #contenuto {
    background : #CC0000;
    color : #FFFFFF;
    margin : 0px auto;
    text-align : center;
    width : 980px;
    hight : 1000px;
    float : left;
    }

    /*id "testata" */

    #testata {
    background : #336600;
    color : #FFFFFF;
    text-align : center;
    margin : 0px auto;
    width : 960px;
    }

    /*id "proprietari" */

    #proprietari {
    color : #FFFFFF;
    font : bold 20px Arial, Verdana, Geneva, Helvetica, sans-serif;
    line-height: 35px;
    border-bottom : 5px solid silver;
    }

    /*classe immagine proprietari */

    img.imgpropr {
    float : left;
    margin-top : 3px;
    margin-right : 10px;
    margin-left : 10px;
    margin-bottom : 0px;
    }

    /*id introduzione */

    #introduzione {
    font : bold 14px Arial, Verdana, Geneva, Helvetica, sans-serif;
    margin: 0px 15px 3px 0px;
    text-align : justify;
    }

    /*class indirizzo*/

    p.indirizzo {
    font : bold 14px Arial, Verdana, Geneva, Helvetica, sans-serif;
    background : #336600;
    text-align : center;
    color : #FFFFFF;
    margin : -2px auto;
    width : 960px;
    line-height: 28px;
    border-top : 2px solid silver;
    }

    /*classe sez_sec */

    div.sez_sec {
    background : #99FF66;
    margin-top : 3%;
    margin-right : 0%;
    margin-left : 1%;
    margin-bottom : 0%;
    color : #FFFFFF;
    width : 960px;
    }

    /*classe navigazione_sin */

    div.navigazione_sin {
    font : bold italic 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    color : #FFFFFF;
    text-align : center;
    background : #336600;
    border: 1px solid silver;
    float : left;
    voice-family : inherit;
    width : 150px;
    }

    /*classe info */

    div.info {
    background : #339900;
    font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    color : #FFFFFF;
    text-align : justify;
    padding-bottom : 0px;
    padding-left : 10px;
    padding-right : 15px;
    padding-top : 0px;
    height : 349px;
    overflow: auto;
    }

    /*classe nav_des */

    div.nav_des {
    font : bold italic 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    margin-top : 20px;
    margin-bottom: 0px;
    color : #FFFFFF;
    text-align : center;
    background : #336600;
    border: 2px solid silver;
    voice-family : inherit;
    width : 180px;
    float : right;
    }

    /*classe siti_partner */

    span.siti_partner {
    font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: underline;
    }

    Ti ringrazio in anticipo per qualsiasi riscontro.

    alx
    Immagini allegate Immagini allegate

  6. #6
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    La tua pagina risulta tagliata in alto, non solo con Firefox. Toglierei quel posizionamento assoluto e anche l'altezza, lasciando che il contenitore si adatti al contenuto. Converrà anche togliere i br doppioni specificando un line-height per le barre di navigazione (che comunque potranno essere riviste quando inserirai i link).
    Guardando la tua immagine, questo all'incirca potresti avere (da regolare magari meglio qualche padding, rivedendo parte della struttura avevo modificato i nomi di alcuni selettori per capire meglio, rinominali magari, contenuti è la colonna sinistra quindi #left, la barra destra è #right):

    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" xml:lang="it" lang="it">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Antonio e Giulia, Appartamenti per vacanze a Vieste</title>
    <link type="text/css" rel="stylesheet" href="antegiu_style.css" />
    </head>
    
    <body>
    <div id="main">
    
    	<div id="left">
    		<div id="testata">
    			<p id="proprietari">Antonio e Giulia</p>
    			<p id="introduzione">[img]images2/foto_proprietari/ant_giulia.jpg[/img]La proprietà si trova in un’area tranquillissima e contornata da antichi ulivi e tipica vegetazione mediterranea.
    
    
    Dista 3 km da una splendida spiaggia di sabbia finissima di circa 3 km e 4 km dal centro del paese.
    
    
    Gli appartamenti sono curatissimi, arredati con gusto, freschi, spaziosi e dotati dei migliori comfort. 
    Si dividono in tre trilocali e un monolocale ed ognuno dispone di una o due camere da letto, cucina attrezzata, bagno con doccia, lavatrice, veranda con tavoli e sedie e di un idilliaco angolo barbecue in pietra fra gli ulivi.
    
    
    Antonio e Giulia vivono in luogo e dedicano ai loro ospiti ogni tipo di attenzione in modo cordiale e familiare ma, al tempo stesso, molto discreto.
    L’orto di famiglia infine, pieno di ogni genere di verdura di stagione, è a disposizione piena e gratuita dei loro ospiti.</p>
    			<p class="indirizzo">omesso</p>	
    		</div>
    		
    		<div class="sez_sec">		
    
    			<div class="navigazione_sin">
    				Spiagge più vicine
    	
    				Listino prezzi
    
    				Foto esterni
    
    				Foto interni
    
    				Piantina struttura
    
    				Piantine appartamenti
    
    				Posizione su mappa
    
    				Recensioni degli ospiti
    
    				Regolamento
    (leggere attentamente)
    
    				Contatti e Prenotazioni
    
    			</div>
    
    			<div class="info">
    			<table>
    				<tbody>
    					<tr>
    						<th>Scialmarino</th>
    						<td>San Lorenzo</td>
    					</tr>
    					<tr class="odd">
    						<th>[img]images2/spiaggie/sanlorenzo.jpg[/img]</th>
    						<td>[img]images2/spiagge/scialmarino.jpg[/img]</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    		<div style="clear:left"></div>
    	</div>
    	</div>
    	
    	<div id="right">
    		Vito e Giulia
    
    		Luigi e Teresa
    
    		Gino e Maria
    
    		Rossella e Angela
    
    		Sante e Tea
    
    		Micaela e Giuseppe
    
    		Elda e Carlo
    
    		Piero e Lella
    
    		Nina e Gianni
    
    		Vincenzo e Michele
    
    		Antonio e Giulia
    
    		Case Paolo
    
    		Villette Matteo
    
    		Villetta Gianni e Feliciana
    
    
    		Carta sconti
    
    		Vieste e dintorni 2012
    
    		I nostri eventi
    
    
    
    		<span class="siti_partner">Siti partner:</span>
    
    		Into Gargano
    
    		Vieste Hospitality
    
    
    	</div>
    
    	<div style="clear:both"></div>
    
    </div>
    </body>
    </html>
    css:

    codice:
    body {
    	background: #333399;
    	text-align: center;
    }
    
    
    #main {
    	width: 1170px;
    	font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight: bold;
    	color: #fff;
    	text-align:center;
    	background: #99CC00;
    	margin:0 auto;
    }
    
    
    #left {
    	width: 980px;
    	background: #CC0000;
    	float:left;
    }
    #right {
    	width: 180px;
    	float: right;
    	font-size:13px;
    	font-style:italic;
    	padding-top: 20px;
    	margin-top:20px;
    	background: #336600;
    	border: 2px solid silver;
    	line-height:28px;
    }
    
    /*id "testata" */
    
    #testata {
    	width: 960px;
    	background: #336600;
    	margin:0 auto;
    }
    
    
    /*id "proprietari" */
    
    #proprietari {
    	font-size: 20px;
    	line-height: 35px;
    	border-bottom: 5px solid silver; 
    }
    
    
    
    #introduzione {
    	font-size: 14px;
    	margin: 0px 15px 3px 0px;
    	text-align: justify;
    }
    #introduzione img {
    	float: left;
    	margin: 0 10px;
    }
    
    
    p.indirizzo {
    	font-size: 14px;
    	line-height: 28px;
    	border-top: 2px solid silver;
    	background: #336600;
    	clear:left;
    }
    
    
    /*classe sez_sec */
    
    div.sez_sec {
    	background: #99FF66;
    	width:960px;
    	margin:0 auto;
    }
    
    
    
    /*classe navigazione_sin */
    
    
    div.navigazione_sin {
    	float: left;
    	width: 160px;	
    	font-size: 13px;
    	font-style:italic;
    	line-height:28px;
    	background: #336600;
    	border:1px solid silver;
    	padding:10px 0;
    }
    
    /*classe info */
    
    .info {
    	float:right;
    	width: 780px;	
    	height: 349px;
    	background: #339900;
    	font-size: 13px;
    	text-align: justify;
    	overflow: auto;
    }
    
    
    /*classe tabella spiagge */
    
    .info table, .info td, .info th {border:1px solid silver;border-collapse:collapse;text-align:center}
    .info td, .info th{padding:3px 3px}
    
    
    
    span.siti_partner {
    	font-size: 13px;	
    	text-decoration: underline;
    }
    se il posizionamento assoluto ti serviva per centrare verticalmente nella pagina il div coi contenuti, sarà meglio usare un altro metodo, non fissando un'altezza (cosa che devi fare con i posizionamenti assoluti; se comunque volessi usare questi, considera che i margini negativi left e top dovranno essere la metà della larghezza e dell'altezza, ma sarà anche necessario indicare un'altezza e una larghezza minima del body (pari a quella del div), per evitare tagli dei contenuti

  7. #7
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    35
    Ciao Prill

    Grazie ancora per il tempo dedicato.

    Come da tuo consiglio, ho immediatamente provveduto a eliminare le altezze dai div "sez_princ" e "contenuto"
    Ti sarei molto grato se mi spiegassi meglio cosa intendi, a proposito del posizionamento assoluto, per "dare un'altezza e una larghezza minima del body (pari a quella del div), per evitare tagli dei contenuti". Ovvero, se ti riferisci al div "sez_princ" e, se sì, se devo dare al body solo la stessa larghezza di questo (visto che la specifica dell'altezza l'ho appena eliminata).
    Tutto questo perchè, purtroppo, ho bisogno di centrare verticalmente il contenuto e questo non mi è ancora riuscito di farlo eliminando le altezze.

    Ho provato a riprodurre in locale i listati che gentilmente hai preparato e, purtroppo, ho notato che il problema rimane e che, specialmente l'indirizzo, viene visualizzato diversamente anche con chrome (mentre prima il problema era solo con firefox, perchè le visalizzazioni su chrome e explorer risultavano identiche).

    Un ulteriore curiosità (sempre nella speranza di imparare da che ne sa di più) mi viene dall'uso che fai della proprietà "clear". So che serve ad evitare che i contenuti si allineino lateralmente agli elementi ma non ho capito la sua funzione specifica nel mio contesto.

    Grazie in anticipo per una qualsiasi risposta.

    alx

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.