[Opera] problema margin

**seaside** · 18-11-2005, 10:21

A dire il vero i problemi ci sono anche con IE, ma essendo IE tanto bacato, ci sono hack a bizzeffe per risolvere i suoi problemi

Questa la pagina.

In pratica:

Il problema riguarda il margin del tag LEGEND, che IE ed OPERA interpretano in modo diverso rispetto a FIREFOX.
Con IE ho risolto tramite un hack... ma con OPERA?

Ho cercato hack per OPERA, ho trovato questo:
www.albin.net/CSS/OwenHack.html

ma non funzia

**thomas_anderson** · 20-11-2005, 19:21

Puoi postare il codice del form?

**seaside** · 20-11-2005, 20:35

Come no, non l'avevo inserito perché avevo preferito lasciare il link diretto alla pagina

Comunque:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="it" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form</title>
<style type="text/css">
<!--
body {
	margin: 20px;
}
form {
	margin: 0;
	padding: 0;
}
fieldset {
	display: inline;
	margin: 0 !important;
	margin: -15px 0 0;
	padding: 8px 15px 15px !important;
	padding: 15px;
	border: 1px solid #009193;
}
legend {
	font-family: Georgia, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #009193;
	margin: 0 !important;
	margin: 0 0 7px;
	padding: 0 6px;
	border: 0;
}
label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6c8c37;
	background-color: #edf3de;
	display: block;
	width: 220px;
	text-align: right;
	margin: 1px 0;
	padding: 7px 10px 7px 0;
}
input {
	color: #414141;
	margin: 0 0 0 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #dcdcdc #f0f0f0 #f0f0f0 #dcdcdc;
}
-->
</style>
</head>
<body>
<form id="gbook" enctype="application/x-www-form-urlencoded" action="book.asp">
  <fieldset>
  <legend>Modulo</legend>
  <label for="gnome">Nome:
  <input type="text" id="gnome" />
  </label>
  <label for="gcognome">Cognome:
  <input type="text" id="gnome" />
  </label>
  <label for="gindirizzo">Indirizzo:
  <input type="text" id="gindirizzo" />
  </label>
  </fieldset>
</form>
</body>
</html>

**thomas_anderson** · 21-11-2005, 12:35

Il mio consiglio in questi casi è riazzerare tutti i margini, evitare le dichiarazioni !important e procedere prima impostando le dichiarazioni di margini, poi il padding.

**seaside** · 22-11-2005, 09:47

Niente da fare, il problema resta è ed è quello, il padding del campo FIELDSET quando è presente il tag LEGEND

Opera e IE si comportano allo stesso modo e diversamente da Firefox.
Ho azzerato tutti i margin e tutti i padding. Lasciando un padding di 10px al campo fieldset succede così:

Questa la pagina.

Questo il CSS (solo quello che crea problemi):

codice:

fieldset {
	display: inline;
	margin: 0;
	padding: 10px;
	border: 1px solid #009193;
}
legend {
	font-family: Georgia, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #009193;
	margin: 0;
	padding: 0;
	border: 0;
}

...e questo il codice della pagina:

codice:

<form id="gbook" action="book.asp" method="post">
  <fieldset>
  <legend>Modulo</legend>
  <label for="gnome">Nome:
  <input type="text" id="gnome" />
  </label>
  <label for="gcognome">Cognome:
  <input type="text" id="gnome" />
  </label>
  <label for="gindirizzo">Indirizzo:
  <input type="text" id="gindirizzo" />
  </label>
  </fieldset>
</form>

**thomas_anderson** · 22-11-2005, 17:12

Prova ad impostare fieldset con display:block

**seaside** · 22-11-2005, 18:29

Originariamente inviato da thomas_anderson
Prova ad impostare fieldset con display:block

Niente da fare

Vabbé nada, ci ho rinunciato, tanto questo form mi serve dentro un layout in cui non è fondamentale la precisione al pixel.
Pazienza

**thomas_anderson** · 22-11-2005, 18:35

Ho visto solo ora che avevi impostato il padding a 10px... toglilo e sistema gli elementi uno per uno.

**seaside** · 22-11-2005, 18:54

Originariamente inviato da thomas_anderson
Ho visto solo ora che avevi impostato il padding a 10px... toglilo e sistema gli elementi uno per uno.

Sìsì l'avevo fatta subito la prova di riazzerare tutto come tuo consiglio nel post #4

Niente

Discussione: [Opera] problema margin

Strumenti discussione

Ricerca discussione

Visualizza

[Opera] problema margin

Permessi di invio