stile per fieldset senza tabella

**pietro09** · 02-06-2010, 11:39

Nella pagina di sotto utilizzo due Fieldset.
Il primo è messo dentro una tabella per evitare che si espanda in larghezza al 100%, come fa invece il secondo.
La domanda è:
1) è possibile eliminare la tabella e usare uno stile appropriato?
2) con IE8 non funziona il padding-top (lo ignora proprio). Cosa sbaglio?

Ciao

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">
<head>
    <title></title>
    <style type="text/css">
        fieldset
        {
            padding:15px;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>
                    <fieldset>
                        <legend>Legend</legend>  
                        <input id="Text1" type="text" /><input id="Button1" type="button" value="button" />

                        <input id="Text2" type="text" /><input id="Button2" type="button" value="button" />

                        <input id="Text3" type="text" /><input id="Button3" type="button" value="button" />

                        <input id="Text4" type="text" /><input id="Button4" type="button" value="button" />

                        <input id="Text5" type="text" /><input id="Button5" type="button" value="button" />

                    </fieldset>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <fieldset>
            <legend>Legend</legend>  
            <input id="Text6" type="text" /><input id="Button6" type="button" value="button" />

            <input id="Text7" type="text" /><input id="Button7" type="button" value="button" />

            <input id="Text8" type="text" /><input id="Button8" type="button" value="button" />

            <input id="Text9" type="text" /><input id="Button9" type="button" value="button" />

            <input id="Text10" type="text" /><input id="Button10" type="button" value="button" />

        </fieldset>
    
    </div>
</body>
</html>

**Mich_** · 03-06-2010, 08:32

Anzitutto sistema l'HTML. Un codice cosi` ha gravi problemi sia semantici che sintattici (e in questi casi i browser possono interpretare a piacimento - o anche non interpretare).

1. Il fileldset puo` stare solo dentro un <form>
2. gli input possono stare solo dentro un <form>

3. hai usato una tabella per formattare: questo puo` rendere impossibile capire al tua pagina per alcune categorie di persone (oltre che per i motori di ricerca)

Quindi per le risposte:
1. DEVI elilminare la tabella - se ti serve come contenitore usa un <div> (ma forse puoi usare altri elementi gia` presenti)
2. In presenza di errori sintattici e` difficile attribuire gli errori ai browser

Consiglio:
Inizia a usare i tag in maniera semantica (ogni tag ha un suo significato preciso: se lo usi per scopi diversi diventa tutto piu` difficile)

**pietro09** · 03-06-2010, 08:44

Originariamente inviato da Mich_
Anzitutto sistema l'HTML. Un codice cosi` ha gravi problemi sia semantici che sintattici (e in questi casi i browser possono interpretare a piacimento - o anche non interpretare).

1. Il fileldset puo` stare solo dentro un <form>
2. gli input possono stare solo dentro un <form>

3. hai usato una tabella per formattare: questo puo` rendere impossibile capire al tua pagina per alcune categorie di persone (oltre che per i motori di ricerca)

Quindi per le risposte:
1. DEVI elilminare la tabella - se ti serve come contenitore usa un <div> (ma forse puoi usare altri elementi gia` presenti)
2. In presenza di errori sintattici e` difficile attribuire gli errori ai browser

Consiglio:
Inizia a usare i tag in maniera semantica (ogni tag ha un suo significato preciso: se lo usi per scopi diversi diventa tutto piu` difficile)

Mamma mia! che paroloni!

Allora, tutto nasce da un certo controllo asp.net. Guardo l'html prodotto e noto questo fieldset dentro una tabella. Provo a togliere la tabella e noto problemi di visualizzazione, da cui la domanda: togliendo la tabella, che stile usare per avere gli stessi risultati?

Nota: questa è una pagina di esempio che ha lo scopo di focalizzare l'attenzione sul problema: eliminare la tabella ma usare uno stile adeguato per avere lo stesso risultato.

Nota: il form, ognipresente in una pagina aspx, è stato eliminato per semplificare.

Nota: il fieldset è stato riempito da controlli senza senso, solo per dargli una larghezza e un'altezza.

ciao

**pietro09** · 03-06-2010, 09:34

Così sembra che vada:
fieldset
{
display: inline-block;
padding:0px;
margin:0px;
}
fieldset div
{
margin:10px;
}

dove, display: inline-block; serve a quello che serve

padding:0px; e margin:0px; servono per togliere il predefinito di alcuni browser

margin:10px; lo imposto nel div che contiene gli elementi all'interno del fieldset

Così sembra che vada, almeno con IE8, Firefox, Opera, chrome e Safari

Ciao

Discussione: stile per fieldset senza tabella

Strumenti discussione

Ricerca discussione

Visualizza

stile per fieldset senza tabella

Permessi di invio