visualizzazione diversa firefox
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 :tongue)
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>     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>   Nome </b> </div> <input type="text" name="nome"> <br>
<div style="width: 100px; float: left;"> <b>   Cognome </b> </div> <input type="text" name="cognome"> <br>
<div style="width: 100px; float: left;"> <b>   Titolo libro </b> </div> <input type="text" name="libro"> <br>
<div style="width: 100px; float: left;"> <b>   Autore </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!
