Form Tabless: incompatibilità tra IE e FF

[pcf]

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

/* 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

<!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&agrave;:</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&ugrave; bello, cosa consiglieresti a 
potenziali turisti dell'Olanda, ecc.
      </div> 

    </fieldset> 

<div class="submit">
<div>
<input type="submit" class="inputSubmit" 
value="Invia &raquo;" />
<input type="submit" class="inputSubmit" 
value="Cancella" />
        </div>
      </div>
        Neretto Campi Obbligatori.
  </form>
</div> 

			
</div>
 		
  
</div>


</div>                                   
	

</body>

[pcf]

Riduco le richieste

Come posso fare a non far uscire i pulsanti di submit dallo sfondo arancione del mio layout ?

Ho cercato di delineare i bordi di ogni singolo elemento per capire dove intervenire ma con l'estensione Web Deweloper di FF1.5 da "Utilizza modello bordo box" non ci riesco

HTML
<div class="submit">
<div>
<input type="submit" class="inputSubmit" 
value="Invia »" />
<input type="submit" class="inputSubmit" 
value="Cancella" />
        </div>
      </div>

/* CSS */

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;
}

help...

[awd]

mica è facile leggere un codice e capire che effetto abbia senza provarlo, non son mica Beethoven!

Un paio di cose: è preferibile non usare per nomi di classi o ID delle parole chiave dell'html (tipo submit). Inoltre hai reso submit anche il pulsante cancella!
Boh ci sono parti che non capisco (expression???), secondo me si poteva fare tutto in modo più semplice.

Nel form div.submit div perché display: inline;?

[pcf]

Grazie AWD

Managgia agli ID e il resto.: biifu:

Su "inline" ed "expression" ho preso tutto da http://jeffhowden.com/code/css/forms/ (vedi sotto)

ma cercavo di capire a cosa servissero..

Se si può semplificare tutto ben venga dammi degli spuntarelli :

[salasir]

Come ti ho già risposto in pvt forse dovremmo chiarire per primo quale codice guardare. Quello che indichi per i bottoni, preso a sè stante, non ha molto significato se non inserito in una pagina. Probabilmente il problema è come è stato definito il container generale. Quindi, ripeto, il codice della pagina collegata all'immagine è quello di riferimento? Oppure vuoi inserire qualla parte nella pagina indicata?
In ogni caso, è necessario verificare anche il contesto in cui è inserito.

[Sol]

Potresti gentilmente indicare l'indirizzo della pagina interessata?

[pcf]

Grazie ragazzi per la vs pazienza

Vi ricompenserò citando nei credits la vs collaborazione

http://www.amsterdamtour.it/prova_form/formviaggio.html

Questa è la pagina dove trovate tutto il codice di riferimento.
(guardate come rientra tutto con IE e come invece i pulsanti di submit vanno giù con FF tanto da non far vedere "neretto: campi obbligatori", il pulsante sfoglia fuori linea)

Ho cercato di togliere quello che non interessa per il vs esame così (spero) di agevolarvi il lavoro

Grazie ancora

[salasir]

E' un'oretta che sto cercando di capirci qualcosa, ma mi perdo tra tutti quei div annidati uno nell'altro. Inoltre le definizioni css sono, a mio parere, a volte ridondanti e sovrapposte.
Adesso stacco xchè devo lavorare ...
Ti consiglio di ricominciare con calma a definire la struttura del layout pezzo per pezzo (contenitore, header, colonne, footer) magari basandoti su un modello a tua scelta tra quelli descritti qui in html.it (Layout a tre colonne) e poi aggiungere, una definizione per volta, ciò che ti serve per il form.
Per esempio non definire tutti quei div obbligatorio, facoltativo, input submit, ... ma limitati a form, label, input ben distinti.
Un passo per volta si riesce a capire meglio dove sbagli. Inoltre, copiando brutalmente una definizione preconfezionata non capisci a cosa servono i vari attributi.
Tieni presente che IE e FF considerano in modi diverso margin e padding: (IE li comprende nella larghezza definita :rollo: , FF li aggiunge - giustamente - ) Capire il box model

Per concludere: prova a spostare </fieldset> subito prima di </form>

[pcf]

Ahia non volevo farti perdere tutto questo tempo
Grazie

prova a spostare </fieldset> subito prima di </form>

Incredibile.. tutto risolto
Anche se lo stesso layout in un altro modulo con l'aggiunta di 2 serie di pulsanti radio questa volta ha problemi con IE e non con FF.
Sfora dai limiti e mi scende tutto giù.
Almeno abbiamo capito che dipende dal fieldset ed è lì che devo agire soprattutto..

Mi riservo prossimamente di capire per studio cosa possa essere successo.. ma + in la altrimenti passerà un altro anno perchè finisca

Grazie infinite per la tua e la vs disponibilità

[salasir]

Comunque, ribadisco il concetto di rivedere con calma il tutto semplificandolo e costruendolo passo passo e, soprattutto per te, capire cosa stai facendo.