Form style... su firefox in un modo, su exploder tutto diverso

**lnessuno** · 29-06-2006, 10:22

eppure non capisco... :master:

fondamentalmente, sto cercando di utilizzare questo form:

codice:

<form action='db.asp' name='formintervento' class='formintervento' method='get'>
	<fieldset>
		<legend>Apertura del guasto</legend>
		


			<label for="motivo">Guasto</label>
			<input type='text' id='motivo' value='<%=motivo%>' />
		</p>
		


			<label for="iddittaassistenza">Assistenza</label>
				<select id='iddittaassistenza'>
				    <%
				    SQLassistenza = "SELECT * FROM T_DitteAssistenza ORDER BY NomeDitta"
				    set rsassistenza = conn.execute(SQLassistenza)
				    while not rsassistenza.eof
					    %>
					    <option value='<%=rsassistenza("iddittaassistenza")%>' <%if iddittaassistenza = rsassistenza("iddittaassistenza") then %>selected<%end if%>><%=rsassistenza("NomeDitta")%> (<%=rsassistenza("Email")%>)</option>
					    <%
	              	  rsassistenza.movenext
	                wend
				    set rsassistenza = nothing
				    %>
				</select>
		</p>
		


			<label for="motivo">Data inizio</label>
			<input type='text' id='datainizio' value='<%=datainizio%>' />
			[img]javascript/calendar/cal.gif[/img]
		</p>
		
	</fieldset>
	

	<fieldset>
		<legend>Chiusura del guasto</legend>
		


			<label for="datafine">Data fine</label>
			<input type='text' id='datafine' value='<%=datafine%>' />
			[img]javascript/calendar/cal.gif[/img]
		</p>
		


			<label for="lavorosvolto">Lavoro</label>
			<input type='text' id='lavorosvolto' value='<%=lavorosvolto%>' />

		</p>
		


			<label for="pezzisostituiti">Ricambi</label>
			<input type='text' id='pezzisostituiti' value='<%=pezzisostituiti%>' />
		</p>
		


			<label for="risolto">Risolto</label>
			<input type='checkbox' name='risolto' value='true' <% if risolto = true then %> checked <% end if %> />
		</p>
	</fieldset>

	<input type='hidden' name='idcomputer' value='<%=idcomputer%>' />
	<input type='hidden' name='identificativo' value='<%=identificativo%>' />
	<% if idintervento = "" then %>
		<input type='hidden' name='azione' value='nuovointervento' />
	<% else %>
	    <input type='hidden' name='idintervento' value='<%=idintervento%>' />
        <input type='hidden' name='azione' value='modintervento' />
	<% end if %>
	
<input type='submit' value='Salva' />
</form>

utilizzando questo stile...

codice:

	<style type='text/css'>
	    p {
			margin-top:-0.5em;
			}
	
		 label {
		width: 4em;
		float: left;
		text-align: right;
		margin-right: 1em;
		display: block;
		}

		.submit input {
		margin-left: 4.5em;
		}
		input,select {
		color: #781351;
		background: #fee3ad;
		border: 1px solid #781351;
		}

		.submit input {
		color: #000;
		background: #ffa20f;
		border: 2px outset #d7b9c9;
		}
		fieldset {
		border: 1px solid #781351;
		width: 18em;
		}

		legend {
		color: #fff;
		background: #ffa20c;
		border: 1px solid #781351;
		padding: 2px 6px;
		}
	</style>

tutto normale, direte voi... un casso, dico io! viene tutto sballato su explorer!! allego screenshot. c'è un modo per risolvere? (non è fondamentale che il risultato sia esattamente questo, però non mi dispiacerebbe insomma

)

**Al_katraz984** · 29-06-2006, 10:26

La soluzione piu semplice è quella di creare 2 CSS, uno compatibile x IE e uno per gli altri browser..

E' un problema abbastanza comune..

**Mich_** · 29-06-2006, 10:34

Si tratta dell'interpretazione diversa del box model.

Nel CSS fai largo uso di border e padding, che in IE fanno parte delle dimensioni (width e height), mentre nei browser conformi sono oltre tali dimensioni.

Conviene inserire, tramite i commenti condizionali, un CSS specifico per IE che "corregge" le interpretazioni diverse.

**lnessuno** · 29-06-2006, 10:47

ho notato però è che eliminando la formattazione del tag p va tutto a posto....

solo che i campi sono troppo distanziati l'uno dall'altro poi

**thomas_anderson** · 29-06-2006, 11:16

http://gabrieleromanato.altervista.o...m-odissea.html

Più che altro per sottolineare il fatto che questo è un problema che deriva da una lacuna nelle specifiche, ossia che non vi è prescrizione per quanto riguarda la resa degli elementi di un form.

nb. i browser hanno differenze di default soprattutto perchè devono garantire la visualizzazione accessibile quando gli stili della pagina non sono presenti (problema simile: le liste <ul> e [list=1])

Gabriele R.

**indigoindigo** · 29-06-2006, 11:57

Oppure imposta la DTD Strict di xhtml 1.0 nella quale, stando a quanto ho letto tempo fa (Mich_ ?), Ie interpreta correttamente il box model..

**lnessuno** · 29-06-2006, 12:30

mmm, smanettando un pò sono riuscito a trovare un accrocchio che funziona relativamente bene. fondamentalmente al posto dei p ho utilizzato un hr "nascosto":

codice:

<form action='db.asp' name='formintervento' class='formintervento' method='get'>
	<fieldset>
		<legend>Apertura del guasto</legend>
			<label for="motivo">Guasto</label>
			<input type='text' id='motivo' value='<%=motivo%>' />
		<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
			<label for="iddittaassistenza">Assistenza</label>
			<select id='iddittaassistenza'>
			    <%
			    SQLassistenza = "SELECT * FROM T_DitteAssistenza ORDER BY NomeDitta"
			    set rsassistenza = conn.execute(SQLassistenza)
			    while not rsassistenza.eof
				    %>
				    <option value='<%=rsassistenza("iddittaassistenza")%>' <%if iddittaassistenza = rsassistenza("iddittaassistenza") then %>selected<%end if%>><%=rsassistenza("NomeDitta")%> (<%=rsassistenza("Email")%>)</option>
				    <%
              	  rsassistenza.movenext
                wend
			    set rsassistenza = nothing
			    %>
			</select>
		<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
			<label for="motivo">Data inizio</label>
			<input type='text' id='datainizio' value='<%=datainizio%>' />
				[img]javascript/calendar/cal.gif[/img]
        <hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
	</fieldset>
	<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
	<fieldset>
		<legend>Chiusura del guasto</legend>
			<label for="datafine">Data fine</label>
			<input type='text' id='datafine' value='<%=datafine%>' />
				[img]javascript/calendar/cal.gif[/img]
		<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
			<label for="lavorosvolto">Lavoro</label>
			<input type='text' id='lavorosvolto' value='<%=lavorosvolto%>' />

		<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
			<label for="pezzisostituiti">Ricambi</label>
			<input type='text' id='pezzisostituiti' value='<%=pezzisostituiti%>' />
		<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
			<label for="risolto">Risolto</label>
			<input type='checkbox' name='risolto' value='true' <% if risolto = true then %> checked <% end if %> />
        <hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
	</fieldset>

	<input type='hidden' name='idcomputer' value='<%=idcomputer%>' />
	<input type='hidden' name='identificativo' value='<%=identificativo%>' />
	<% if idintervento = "" then %>
		<input type='hidden' name='azione' value='nuovointervento' />
	<% else %>
	    <input type='hidden' name='idintervento' value='<%=idintervento%>' />
        <input type='hidden' name='azione' value='modintervento' />
	<% end if %>
	<hr style='margin-bottom:-3px; border:1px solid #FFF;'/>
	<input type='submit' value='Salva' />
</form>

codice:

	<style type='text/css'>
	    p {
			margin-top:-0.5em;
			}
	
		 label {
		width: 4em;
		float: left;
		text-align: right;
		margin-right: 1em;
		display: block;
		}

		.submit input {
		margin-left: 4.5em;
		}
		input,select {
		color: #781351;
		background: #fee3ad;
		border: 1px solid #781351;
		}

		.submit input {
		color: #000;
		background: #ffa20f;
		border: 2px outset #d7b9c9;
		}
		fieldset {
		border: 1px solid #781351;
		width: 18em;
		}

		legend {
		color: #fff;
		background: #ffa20c;
		border: 1px solid #333399;
		padding: 2px 6px;
		margin-bottom:0.5em;
		}
	</style>

ecco il risultato

**lnessuno** · 29-06-2006, 12:31

Originariamente inviato da indigoindigo
Oppure imposta la DTD Strict di xhtml 1.0 nella quale, stando a quanto ho letto tempo fa (Mich_ ?), Ie interpreta correttamente il box model..

è già xhtml 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**indigoindigo** · 29-06-2006, 13:58

Originariamente inviato da lnessuno
è già xhtml 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

peccato

**Mich_** · 29-06-2006, 14:56

Originariamente inviato da lnessuno
è già xhtml 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Non direi proprio.
Ci son troppi errori perche` lo sia.
Prova a fare una validazione del codice: validatore HTML e validatore CSS

Discussione: Form style... su firefox in un modo, su exploder tutto diverso

Strumenti discussione

Ricerca discussione

Visualizza

Form style... su firefox in un modo, su exploder tutto diverso

Permessi di invio