visualizzazione diversa firefox

23-02-2013, 18.18.42

Salve a tutti. Sto creando un sito-biblioteca e questa pagina sarà il modello di tutte le schede dei libri http://www.curiesbooks.altervista.org/13.html... i problemi sono due:

1) in qualsiasi browser le "è" accentate(e non solo) prendono la forma di sinboli stani, come punti interrogativi o altro... come posso risolvere l'inconveniente?

2) aprendo la pagina sopra indicata la tabella che contiene il form per la prenotazione dei libri si estende a tutto il corpo pagina, scomponendo anche il layout dell'intera pagina. consigli?

Allego il codice della pagina e il ccs corrispondente(il ccs è "riciclato" e adattato da una pagina simile... troverete diverse cose inutili come ad esempio degli attributi per una sidebar che non esiste, tralasciate

)

Codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>13</title>

<link href="http://it.altervista.org/css/alterpages/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link id="apcss" rel="stylesheet" type="text/css" href="style1.css" />

</head>

<body>
<div id="av_toolbar_regdiv" style="padding:0;margin:0;position:absolute;height:32px;width:100px;z-index:10001">
</div>


<div id="wrap">

  <div id="header" class="main-style">
              
<img src="http://www.curiesbooks.altervista.org/alterpages/3.jpg#gallery" class="align-center" alt="" title=""/>

  </div>

    <div id="navigation" class="main-style">

<ul class="nav">

<li>
<a href="/index.html">Torna alla Home</a>
</li>

<li>
<a href="/biblioteca.html">Torna alla Biblioteca</a>
</li>
</ul>

</div>

<div class="grid_3 left">
<p><font color="#00008B"; size="20"><strong> 13 </strong></font></p>

<p>
	<strong>Autore:</strong> Jay Asher</p>
<p>
	<strong>Trama:</strong> Clay Jensen torna a casa da scuola e davanti alla porta trova un pacchetto indirizzato a lui, ma senza mittente. Dentro ci sono sette cassette numerate con dello smalto blu. Clay comincia ad ascoltare: le ha registrate Hannah Baker, la ragazza di cui Clay è innamorato da sempre. La stessa ragazza che si è suicidata due settimane prima. Hannah ha registrato tredici storie, una per lato, una per ogni persona che in un modo o nell'altro l'ha spinta verso la decisione di togliersi la vita. Ma lui cosa c'entra? Clay è sconvolto, vuole capire fino in fondo, scoprire quale ruolo ha svolto. Per tutta la notte, guidato dalla voce di Hannah, Clay ripercorre gli episodi e i luoghi che hanno segnato la vita della ragazza e che come tante piccole palle di neve si sono accumulati fino a divenire una valanga incontrollabile. Per tutta la notte, con la voce nelle cuffie, Clay si tuffa nei ricordi, nei rimpianti, e si tormenta cercando di capire cosa sarebbe successo se...</p>
</div>

<div id="copertina"; class="grid_4 left">
<img src="http://curiesbooks.altervista.org/13.jpeg"/>
</div>

<table width="79%" border="1" cellpadding="2" bgcolor: transparent class="align-center">
<tr>
<td>      <p><font size="4"><strong>&nbsp&nbsp&nbsp&nbsp Prenota qui il tuo libro </strong></font></p>
              <form method="post" action="http://curiesbooks.altervista.org/prenotazioniperemail.php"> <br>
              <div style="width: 100px; float: left;"> <b> &nbsp&nbspNome </b> </div> <input type="text" name="nome"> <br>
              <div style="width: 100px; float: left;"> <b> &nbsp&nbspCognome </b> </div> <input type="text" name="cognome"> <br>
              <div style="width: 100px; float: left;"> <b> &nbsp&nbspTitolo libro </b> </div> <input type="text" name="libro"> <br>
              <div style="width: 100px; float: left;"> <b> &nbsp&nbspAutore </b> </div> <input type="text" name="autore"> </td>
<td>        <fieldset>
                     <legend> <b> Clesse </b> </legend>

                     1  <input type="radio" name="classe" value="1"/>
                     2  <input type="radio" name="classe" value="2"/>
                     3  <input type="radio" name="classe" value="3"/>
                     4  <input type="radio" name="classe" value="4"/>
                     5  <input type="radio" name="classe" value="5"/>
             </fieldset>
                  
             <fieldset>
                     <legend> <b> Sezione </b> </legend>

                     A  <input type="radio" name="sezione" value="A"/>
                     B  <input type="radio" name="sezione" value="B"/>
                     C  <input type="radio" name="sezione" value="C"/>
                     D  <input type="radio" name="sezione" value="D"/>
                     E  <input type="radio" name="sezione" value="E"/>
                     F  <input type="radio" name="sezione" value="F"/>
                     G  <input type="radio" name="sezione" value="G"/>
             </fieldset> <br>
            <input type="submit" value="Prenota" class="align-center">
           </form> </td>
</tr>

</div>
</body>
</html>

Codice:

body {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #313131;
background-color: transparent;
background-image: url(http://www.curiesbooks.altervista.org/alterpages/rleviter.jpg#gallery);
background-repeat: repeat;
}

#header {
background-color: #add8e6;
background-image: url("http://im.altervista.org/alterpages/header/header016.jpg#gallery");
min-height: 20px;
background-repeat: no-repeat;
background-position: top center;
}

#wrap {
background-color: #add8e6;
width: 1050px;
}

#content {
width: 1000px;
}

h1 {
color: #000000;
font-size: 54px;
font-family: Times New Roman, Times, serif;
}

h2 {
color: #DB271A;
font-size: 24px;
}

a {
color: #C12317;
}


/* --- border --- */
#header, #content, #sidebar, #footer, ul.nav > li > a, ul.nav li ul   {
border-color: #ffffff;
}

/* --- nav sidebar --- */
div#sidebar ul.nav, div#sidebar ul.nav a {
color: #000000;
}
div#sidebar ul.nav a:hover {
color: #C12317;
}
div#sidebar ul.nav > li > a {

}

/* border custom nav sidebar */
div#sidebar ul.nav > li > a, div#sidebar ul.nav li ul {
border-color: #E0E0E0;
}

/* --- nav header --- */
div#header ul.nav, div#header ul.nav a {
color: #404040;
}
div#header ul.nav a:hover {
color: #202020;
}
div#header ul.nav > li > a,  div#header ul.nav li ul {
background-color: #ffffff;
}
/* border custom nav header */
div#header ul.nav > li > a, div#header ul.nav li ul {
border-color: #c0c0c0;
}

/* --- #navigation --- */

div #navigation {
border-color: #cccccc;
}

div#navigation ul.nav, div#navigation ul.nav li, div#navigation ul.nav ul {
background-color: #cef6f5;
}

div#navigation ul.nav li a {
color: #0300ff;
}

div#navigation ul.nav li:hover, div#navigation ul.nav li:hover ul li, div#navigation ul.nav ul {
background-color: #f3f781;
}

div#navigation ul.nav li:hover a, div#navigation ul.nav ul a {
color: #0000ff;
}


/* --- styles --- */

h1 {font-weight:bold}
h2 {font-weight:bold}


div#wrap {
padding:20px;
}

div#header ul.nav a {
border-right-width: 1px;
border-right-style: solid;
}

div#header ul.nav li ul {
border-style: solid;
border-width: 1px;
}

div#header ul.nav li ul, div#sidebar ul.nav li ul {
list-style-type:disc; /* static list type */
}

div#header .title {
padding:10px
}

div#copertina {
padding-top:40px;
padding-left:60px;
padding-right:0px;
padding-bottom:20px;
}

div#sidebar {
font-size: 90%;
}

div#sidebar ul.nav a, div#sidebar ul.nav li ul {
border-bottom-width: 1px;
border-bottom-style: dashed;
}

div#footer {
border-top-style: dotted;
border-top-width: 1px;
font-size: 90%;
}

/* --- navigation --- */

div #navigation {
padding:1px 0;
border-top-style: solid;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
}

div#navigation ul.nav ul {
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2)
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2)
}

Grazie in anticipo!

23-02-2013, 18.22.05

Prima del tag <html> di manca la dichiarazione del DOCTYPE.

23-02-2013, 18.24.23

qundi cosa devo aggiungere? scusa l'ignoranza...

23-02-2013, 18.29.24

Prima del tag <html> devi aggiungere questo

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

23-02-2013, 18.35.35

adesso fa la stessa cosa anche in chrome, e i punti interrogativi al posto delle "è" non scompaiono

23-02-2013, 18.42.35

Per la è devi scrivere

Codice HTML:

&egrave;

al posto della è

23-02-2013, 18.46.32

perfetto, punto 1 risolto... per la tabella? D: scusami se approfitto della tua pazienza

23-02-2013, 18.48.51

Io non userei una tabella per racchiudere il testo, ma userei i <div>.

23-02-2013, 18.50.42

il problema è il modulo... dici che puo ssere il "Prenota qui il tuo libro" nella tabella a dare fastidio?

23-02-2013, 18.54.05

No, io intendo la macrotabella che contiene il testo, la sostituirei con i <div>

edit: Nei css ho trovato questo

Codice:

body {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #313131;

Dovresti specificare l'unità di misura nel line-height, di solito em

**dreadnaut** · 23-02-2013, 18.56.20

Mi spiace contraddire australiafever, ma entrambi i suoi suggerimenti sono obsoleti.

Per il doctype puoi usare semplicemente

Codice HTML:

<!doctype html>

mentre per le lettere accentate evita cose come è (entità html) ma assicurati soltanto che l'encoding della pagina sia uguale a quello dichiarato.

Come fare? Vedi questa riga nel tag <head> della tua pagina:

Codice HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Se hai dichiarato utf-8 ed ottieni dei simboli strani, il tuo editor di testo salva probabilmente come iso-8859-1. Puoi configurare l'editor diversamente, oppure cambiare la dichiarazione sopra in

Codice HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

o più semplicemente

Codice HTML:

<meta charset="iso-8859-1" />

23-02-2013, 18.58.32

è quello il punto! quella macro tabella non dovrebbe contenere il testo, se vedi inizia subito prima del form e si chiude subito dopo.. Non capisco perchè si allarga cosi...

23-02-2013, 18.58.50

Si hai ragione dreadnaut, però ho pensato che era il modo per risolvere velocemente, comunque grazie per la correzione.

23-02-2013, 19.03.08

Originalmente inviato da dreadnaut

Mi spiace contraddire australiafever, ma entrambi i suoi suggerimenti sono obsoleti.

Per il doctype puoi usare semplicemente

Codice HTML:

<!doctype html>

mentre per le lettere accentate evita cose come è (entità html) ma assicurati soltanto che l'encoding della pagina sia uguale a quello dichiarato.

Come fare? Vedi questa riga nel tag <head> della tua pagina:

Codice HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Se hai dichiarato utf-8 ed ottieni dei simboli strani, il tuo editor di testo salva probabilmente come iso-8859-1. Puoi configurare l'editor diversamente, oppure cambiare la dichiarazione sopra in

Codice HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

o più semplicemente

Codice HTML:

<meta charset="iso-8859-1" />

dreadnaut grazie 1000... e per la tabella?

**dreadnaut** · 23-02-2013, 19.06.55

Per la tabella australiafever ha perfettamente ragione: non la usare.

23-02-2013, 19.08.53

Originalmente inviato da dreadnaut

Per la tabella australiafever ha perfettamente ragione: non la usare.

potresti dirmi dove modificare il codice per mantenere lo stesso layout e non utilizzare la tabella?

Discussione: visualizzazione diversa firefox

LinkBack

Strumenti discussione

Display

visualizzazione diversa firefox

Regole di scrittura