Problema visualizzazione su iPhone

**dwb** · 25-11-2012, 13:43

Questo sito:

http://www.fotogabry.it/chisiamo/

su pc si vede bene, ma guardandolo su iPhone le linee si vedono doppie, nonostante abbia impostato il background no repeater...

**Prill** · 25-11-2012, 13:53

Ci sono problemi di visualizzazione anche su pc con browser diversi da Explorer (doppia linea in basso, link disallineati). Correggi gli errori nel css (puoi sottoporlo al validatore del w3c per identificare i problemi http://jigsaw.w3.org/css-validator/) e aggiungi un doctype

**dwb** · 25-11-2012, 14:34

Grazie per la risposta.
L'ho sottoposto al validatore, ma a parte 2 codici di colori, non mi segnala altro.
Ecco il css, mi daresti una mano?

codice:

@charset "utf-8";
/* CSS Document 
body,td,th {
	color: #FFF;
}
body {
	background-color: #72797f;
}
.menu {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	background-color: #72797f;
	background-repeat: no-repeat;
	text-align: right;
	vertical-align: top;
}
.menu_under {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FFF;
	background-color: #72797f;
	text-align: right;
	vertical-align: top;
}
.content {
	background-color: #72797f;
	text-align: right;
	vertical-align: top;#Tabella_01 tr td #contatti center .form {
	text-align: left;
}
.right_Style_Form {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #FFF;
	background-color: #72797f;
	background-repeat: no-repeat;
	text-align: left;
	vertical-align: top;
}
.Under_SX 
{
	background-color: #72797f;
	background-image: url(immagini/division.jpg);
	background-repeat: no-repeat;
}


/* CSS Form */

#F_submit {  
background-color: #72797f; /* colore di sfondo    */  
border: 1px solid #FFF; /* bordo dell'elemento */  
color: #FFF;               /* colore del testo    */ 
font-weight: bold;         /* testo in grassetto  */  
font-family: Verdana, Geneva, sans-serif /* carattere del button */
height: 25px;              /* altezza             */  
width: 80px;               /* larghezza           */
}
#ModuloContatti {
	font-size: 10px;
}

input, textarea { /* Stili comuni agli elementi del form */
background-color:#bbbdbe;
color: #FFF; /* Colore del testo */
float: left; /* Float a sinistra */
font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
margin: 2px 0; /* Margini */
#clickPrivacy {
	font-size: 8px;
}
#Tabella_01 tr td table {
	text-align: center;
}
.ChiSiamoActive {
	text-align: left;
}
#Tabella_01 tr td table tr td {
	text-align: justify;
}

**Prill** · 25-11-2012, 17:49

in content

vertical-align: top;#Tabella_01 tr td #contatti center .form {
text-align: left;}

manca dopo vertical-align:top la parentesi di chiusura prima della dichiarazione successiva

manca la chiusura anche qui:

input, textarea { /* Stili comuni agli elementi del form */
background-color:#bbbdbe;
color: #FFF; /* Colore del testo */
float: left; /* Float a sinistra */
font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
margin: 2px 0; /* Margini */

**Prill** · 25-11-2012, 19:21

Eliminando le tabelle, le immagini spaziatrici, semplificando e svincolando i contenitori da un'altezza specifica, utilizzando per il filetto orizzontale semplicemente il bordo inferiore di un div e uno sfondo per la linea verticale (sfondo ripetuto in verticale per tutta l'altezza del contenitore e posizionato 360px da sinistra (puoi spostarlo più in qua e in là):

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
body {
	font-family:Verdana, Geneva, sans-serif;
	background-color: #72797f;
	margin:0;
	}
#main {
	width:1260px;
	margin:0 auto;
	color:#fff;
	background-image:url(immagini/linea2.jpg);
	background-repeat:repeat-y;
	background-position:360px;
	}
#content {
	border-bottom:1px solid #fff;
	}
#left {
	width:354px;
	float:left;
	}
#right {
	width:880px;
	float:right;
	padding-left:20px;
	}
#footer {
	text-align:right;
	padding-top:5px;
	padding-left:374px;
	font-size: 10px;
	}
</style>
</head>

<body>
<div id="main">
	<div id="content">
	  <div id="left">
	    

[img]immagini/logo.jpg[/img]</p>
	  </div>
	  <div id="right">
	    

Gabry nasce come fotografo alla fine degli anni '70.</p>
			

La passione per l&rsquo;..... qui tutto il testo diviso in paragrafi ...
    Sono inoltre disponibili auto d&rsquo;epoca per cerimonie e partecipazioni nozze.</p>
		</div>
		<div style="clear:both"></div>
  </div>
	<div id="footer">© ... - omessi dati e indirizzi</div>
</div>
</body>
</html>

manca da reinserire il menu nella colonna sinistra e gli script e css in head

p.S.: ho ridimensionato i 1281 pixel della tua tabela a 1260 del div main perché almeno così a 1280 di risoluzione non si vedrà lo scrolling orizzontale nel caso in cui appaia la barra di scorrimento verticale

**Prill** · 25-11-2012, 19:30

dimenticata l'immagine usata come sfondo (la tua ritagliata)

**dwb** · 25-11-2012, 20:42

Originariamente inviato da Prill
dimenticata l'immagine usata come sfondo (la tua ritagliata)

Il problema delle doppie linee sotto a sinistra come posso risolverlo? Grazie intanto per ora...

**Prill** · 25-11-2012, 20:48

E' stato risolto. Copia e incolla

**dwb** · 25-11-2012, 21:09

Domani provo, ti ringrazio.
Una domandina: in questo modo il problema delle linee è definitivamente risolto anche su pc, indipendentemente da risoluzione e browser utilizzato?

**Prill** · 25-11-2012, 21:25

sì, e se inserisci altri contenuti e le due colonne diventano più alte non avrai problemi dato che la linea orizzontale è impostata come bordo inferiore del div content e quella verticale come sfondo del contenitore generale

Discussione: Problema visualizzazione su iPhone

Strumenti discussione

Ricerca discussione

Visualizza

Problema visualizzazione su iPhone

Permessi di invio