Far diventare <legend> un blocco

**ntd** · 18-11-2007, 13:34

Ciao,
ho la seguente pagina HTML:

Codice PHP:


<html>



<head>

  <style type="text/css">

    legend {

      display: block;

      width: 100%;

      background-color: silver;

    }

  </style>

</head>



<body>

  <form>

    <fieldset>

      <legend>Titolo</legend>

      

<label>Un testo: <input type="text" /></label></p>

      

<input type="submit" value="CONFERMA" /></p>

    </fieldset>

  </form>

</body>



</html>

Da quanto scritto nella sezione <style>, mi aspetto che <legend> diventi block (per default è inline) e che lo sfondo silver mi copra il 100% di larghezza pagina. Invece, almeno in firefox, se ne frega.

Idee o consigli?

**ntd** · 19-11-2007, 17:35

up

**Mich_** · 19-11-2007, 18:13

che lo sfondo silver mi copra il 100% di larghezza pagina

In realta` copre il 100% del blocco contenitore. Nel caso specifico il frameset. Dato che questo non ha una larghezza definita, viene ad occupare "la larghezza minima".
Per avere il tuo <label> largo il 100% della pagina occorre che il frameset sia definito width: 100% e ricorsivamente il <form>, il <body> e l'<html> (nei browser standard body e html sono due oggetti diversi).

**ntd** · 19-11-2007, 18:37

Originariamente inviato da Mich_
Per avere il tuo <label> largo il 100% della pagina occorre che il frameset sia definito width: 100% e ricorsivamente il <form>, il <body> e l'<html> (nei browser standard body e html sono due oggetti diversi).

Grazie per il suggerimento: in realtà è <legend> che mi interessa largo 100%. Comunque, visto che l'idea non è malvagia e implementarla non è un lavoraccio, c'ho provato:

Codice PHP:


<html>



<head>

  <style type="text/css">

    legend {

      display: block;

      width: 100%;

      background-color: silver;

    }

    fieldset, form, body, html {

      width: 100% !important;

    }

  </style>

</head>



<body>

  <form>

    <fieldset>

      <legend>Titolo</legend>

      

<label>Un testo: <input type="text" /></label></p>

      

<input type="submit" value="CONFERMA" /></p>

    </fieldset>

  </form>

</body>



</html>

No way, nada, nisba: <legend> resta imperterrito un elemento inline.

Scavando ho trovato questo articolo:
http://www.tjkdesign.com/articles/ho...nd_element.asp
ma il workaround crea più problemi che vantaggi: piuttosto di usare una roba del genere non uso legend!

**thomas_anderson** · 19-11-2007, 18:43

ma sei in quirks mode? che doctype usi?

**ntd** · 19-11-2007, 18:59

Volevo focalizzare il problema. Comunque ecco lo stesso documento (con lo stesso problema) validato XHTML-1.0:

Codice PHP:


<?xml version="1.0" encoding="utf-8"?>

<!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" xml:lang="it-IT" lang="it-IT">



<head>

  <title>Prova</title>

  <style type="text/css">

    legend {

      display: block;

      width: 100%;

      background-color: silver;

    }

    fieldset, form, body, html {

      width: 100% !important;

    }

  </style>

</head>



<body>

  <form action="http://www.chissenefrega.it" method="post">

    <fieldset>

      <legend>Titolo</legend>

      

<label>Un testo: <input type="text" /></label></p>

      

<input type="submit" value="CONFERMA" /></p>

    </fieldset>

  </form>

</body>



</html>

Discussione: Far diventare <legend> un blocco

Strumenti discussione

Ricerca discussione

Visualizza

Far diventare <legend> un blocco

Permessi di invio