Ciao ragazzi, ho provato ad applicare il suggerimento trovato su Html.it sull'uso di Form tabless completamente realizzato con i CSS di Jeffhowden
Mentre quanto da me modificato e implementato nel mio sito con IE6 WXPSP2 è perfetto, con FF1.5 ho questi problemi che non riesco a risolvere anche provando a variare valori e parametri (in realtà non riesco ad individuare la parti di codice di jeffhowden interessate)
* i pulsanti sotto di Submit "Invia" e "Cancella" si trovano troppo sotto
(escono dal mio layout, dallo sfondo arancione a quello bianco)
* il pulsante di Sfoglia img non è localizzato al bordo estremo della sua cella
Sia per IE che per FF
* la Label "Diario di Viaggio" della textarea non è in linea con il suo bordo sinistro
* Vorrei cambiare anche i contorni dei pulsanti "grigio" di Submit "Invia" e "Cancella" con dei colori che mettano in rilievo l'arancione frontale rispetto allo sfondo generale dello stesso colore:
Eccovi le 2 img di IE e FF e il relativo codice *Html* e *CSS*
img IE
img FF
Spero possiate aiutarmi, a fine lavoro ringranzierò ufficialmente chi vorrà farlo e chiunque voglia fornirmi suggerimenti e consigli
CSS
codice:
/* form.css */ modificata (vedi + avanti)
/* form.import.css */ (l'ho lasciata invariata)
Li trovate in fondo alla pagina di http://jeffhowden.com/code/css/forms/
** 2pag.css**
/* Parte di codice interessata */
#content {
margin-left: 213px;
margin-right: 123px;
background-image: url(../img/content.gif);
height: 652px; }
.contenitore_cx {
width:426px;
\width:428px;
w\idth:426px;
border-top: 1px solid #AB6400;
margin-left: 2px;}
.contenitore_cx_titolo {
margin-top: 0px;
padding: 15px 15px 10px 15px;}
.contenitore_cx_tutto {
width:426px;
\width:428px;
w\idth:426px;
border-top: 0px solid #AB6400;
margin-left: 4px;
margin-top: 10px;}
.testo_cx_sx {
line-height:13px;
text-indent:0px;
color: White;
text-align: justify;
font-size: 11px;}
------------------
/* form.css */ (modificata rispetto all'originale)
* {
margin: 0px;
padding: 0px;
}
form {
margin: 0px;
padding: 0px;
font-size: 100%;
/*min-width: 560px;
max-width: 620px;*/
width: 420px;
}
form fieldset {
/*clear: both;*/
font-size: 100%;
border-color: #ff9900;
border-width: 1px 0px 0px 0px;
border-style: solid none none none;
padding: 2px;
margin: 0px 0px 0px 25px;
}
label {
font-size: 100%;
}
label u {
font-style: normal;
text-decoration: underline;
}
input, select, textarea {
font-family: Tahoma, Arial, sans-serif;
font-size: 100%;
color: #000000;
}
textarea {
overflow: auto;
}
form div {
clear: left;
display: block;
width: 354px;
height: expression('1%');
margin: 5px 0px 0px 0px;
padding: 1px 3px;
}
form div fieldset {
clear: none;
border-width: 1px;
border-style: solid;
border-color: #666666;
margin: 0px 0px 0px 142px;
padding: 0px 5px 5px 5px;
width: 197px;
}
form div fieldset legend {
font-size: 100%;
padding: 0px 3px 0px 9px;
}
form div.required fieldset legend {
font-weight: bold;
}
form div label {
display: block;
float: left;
width: 130px;
padding: 3px 5px;
margin: 0px 0px 5px 0px;
text-align: right;
}
form div.optional label, label.optional {
font-weight: normal;
}
form div.required label, label.required {
font-weight: bold;
}
form div label.labelCheckbox,
form div label.labelRadio {
float: none;
display: block;
width: 200px;
height: expression('1%');
padding: 0px;
margin: 0px 0px 5px 142px;
text-align: left;
}
form div fieldset label.labelCheckbox,
form div fieldset label.labelRadio {
margin: 0px 0px 5px 0px;
width: 170px;
}
form div img {
border: 1px solid #000000;
}
form div input, form div select,
form div textarea {
width: 200px;
padding: 1px 3px;
margin: 0px 0px 0px 0px;
}
form div input.inputFile {
width: 211px;
}
form div select.selectOne,
form div select.selectMultiple {
width: 211px;
padding: 1px 3px;
}
form div input.inputCheckbox,
form div input.inputRadio, input.inputCheckbox, input.inputRadio {
display: inline;
height: 14px;
width: 14px;
background-color: transparent;
border-width: 0px;
padding: 0px;
margin: 0px 0px 0px 140px;
}
form div.submit {
width: 214px;
padding: 0px 0px 0px 140px;
}
form div.submit div {
display: inline;
/*float: left;*/
text-align: left;
width: auto;
padding: 0px;
margin: 0px;
}
form div input.inputSubmit,
form div input.inputButton, input.inputSubmit, input.inputButton {
background-color: #ff9900;
color: #ffffff;
width: auto;
padding: 0px 6px;
margin: 0px;
}
form div.submit div input.inputSubmit,
form div.submit div input.inputButton {
float: right;
margin: 0px 0px 0px 5px;
}
form div small {
display: block;
margin: 0px 0px 5px 142px;
padding: 1px 3px;
font-size: 88%;
height: expression('1%');
}
=====================================
HTML Parte di Codice interessata
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="en" lang="it">
<head>
<title>Title</title>
<link href="../styles/2pag.css" rel="stylesheet" type="text/css" / >
<link href="../styles/nolink.css" rel="stylesheet" type="text/css" / >
<link href="../styles/form.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import "../styles/form.import.css";
</style>
</head>
<body>
<div id="content">
<div class="contenitore_cx">
<div class="contenitore_cx_titolo">
<h2>Modulo per i Turisti Olandesi</h2>
</div>
<div class="contenitore_cx_tutto">
<div class="testo_cx_sx">
<form action="/code/css/forms/" method="post"
enctype="multipart/form-data">
<fieldset>
<div class="required">
<label for="first_name">Autore:</label>
<input name="first_name" id="first_name"
class="inputText"
size="10" maxlength="100" value="" type="text">
(Cognome,
Nome o solo Nickname)
</div>
<div class="required">
<label for="email">Email:</label>
<input name="email" id="email"
class="inputText"
size="10"
maxlength="250" value="" type="text">
</div>
<div class="required">
<label for="city">Città:</label>
<input name="city" id="city" class="inputText"
size="10" maxlength="100" value="" type="text">
(Amsterdam e dintorni, Bruges, Bruxelles, ecc.)
</div>
<div class="optional">
<label for="last_name">Periodo Viaggio:</label>
<input name="last_name" id="last_name"
class="inputText"
size="10" maxlength="100" value=""
type="text">
(Da gg/mm/aaaa a gg/mm/aaaa)
</div>
<div class="optional">
<label for="last_name">Url mio Sito/Link</label>
<input name="last_name" id="last_name"
class="inputText"
size="10" maxlength="100" value="www."
type="text">
Inviaci l'Url
del tuo Sito Diario Viaggio,
Link interessanti a siti amatoriali di
documentazione e ricerca per l'Olanda
</div>
<div class="optional">
<label for="image">Foto:
(
400x400px 50Kb)</label>
<input name="image" id="image"
class="inputFile" type="file">
<label for="delete_image"
class="labelCheckbox">
<input name="delete_image"
id="delete_image"
class="inputCheckbox" value="1" type="checkbox">Cancella</label>
</div>
<div class="required wide">
<label for="note_wide">Diario di Viaggio:</label>
<textarea name="note_wide" id="note_wide"
class="inputTextarea" rows="11" cols="21"></textarea>
Raccontaci il tuo soggiorno, cosa hai
visto di più bello, cosa consiglieresti a
potenziali turisti dell'Olanda, ecc.
</div>
</fieldset>
<div class="submit">
<div>
<input type="submit" class="inputSubmit"
value="Invia »" />
<input type="submit" class="inputSubmit"
value="Cancella" />
</div>
</div>
Neretto Campi Obbligatori.
</form>
</div>
</div>
</div>
</div>
</body>