<fieldset> impostare la larghezza massima

**Whitecrowsrain** · 20-10-2006, 11:41

Salve a tutti
vorrei dare una largezza massima all'elemento fieldset ma se metto

codice:

fieldset
{
 widht:30px;
}

oppure :

codice:

fieldset
{
  max-width:30px;
}

non le rispetta, perchè?

e poi non ho capito perchè mentre IE me le mette uno accanto all'altra(se ne ho più di uno) firefox mi va sempre a capo, indistintamente se occupa o no tutto lo spazio...io vorrei che Firefox si comportasse come IE..come faccio?

**Kiantis** · 20-10-2006, 11:49

in explorer non ci sono i max-width e min-width, ma intende width come dimensiona 'assoluta'.
Mentre in altri (es. firefox) width è quella 'consigliata'.
Di solito risolvo definento tutte queste tre con lo stesso valore, e funziona su tutti. (non c'è modo di dare solo la massima in IE, ma solo l'assoluta, ovvero sia min che max contemporaneamente, che io sappia).

**Whitecrowsrain** · 20-10-2006, 11:56

Originariamente inviato da Kiantis
in explorer non ci sono i max-width e min-width, ma intende width come dimensiona 'assoluta'.
Mentre in altri (es. firefox) width è quella 'consigliata'.
Di solito risolvo definento tutte queste tre con lo stesso valore, e funziona su tutti. (non c'è modo di dare solo la massima in IE, ma solo l'assoluta, ovvero sia min che max contemporaneamente, che io sappia).

ok ma se imposto solo width non me la rispetta lo stesso!!

e poi come faccio a farli affiancare quando c'è sapzio e a farli andare a capo in caso contrario?(ho un layout fluido..)

**Kiantis** · 20-10-2006, 11:58

Chi non la rispetta? Si comportano differentemente i browser in questo caso.

Che tipo di layout? un inline-block?

(forse è piu utile vedere il codice per capire)

**Whitecrowsrain** · 20-10-2006, 12:05

ecco il css ovvero la sua struttura

codice:

html,body
{
  margin: 0;
  padding:0
}

body
{
 
  font-family: "Tahoma";
  font-size: 80%
}
div#container
{
  position: relative
}

/*stili generici, su header e footer*/

div#header
{
  background:#FFF  url('../img/sfum4.gif') left top repeat-x;
  height: 80px;
}

h1,h2
{
  margin: 0;
  padding:0
}

h1
{
  padding-left:10px;
  font: bold 2.3em/80px arial,sans-serif
}

h2
{
  color: #37605E;
  font-size: 1.5em
}


/*stili specifici per il layout*/
div#navigation
{
  position: absolute;
  top: 80px;
  left: 0;
  width: 160px;
  \width:170px;
  w\idth:160px;
  padding: 1em 0 0 10px
}

div#extra{
  position: absolute;
  top: 80px;
  right: 0;
  width: 160px;
  \width:170px;
  w\idth:160px;
  padding: 1em 5px
}

div#content
{
  font-size:1.2em;
  border-style:solid;
  border-width:0 170px;
  border-color:#000 #C3FFFF #000 #C3FFFF;
  padding: 1em 10px;
}


div#footer
{
  text-align:center;
  padding: 5px 0;
  background:#FFF  url('../img/sfuma5.gif') left top repeat-x;
  font-weight: bold;
  color:#FFFFFF;
}

quindi in html il codice verrebbe:

codice:

  <html>
<head>
<title>Layout a tre colonne con posizionamenti assoluti</title>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Html.it</h1>

    </div>
    <div id="content">
        contenuto!
    </div>
    <div id="extra">
        colonna di destra
    </div>
    <div id="navigation">
        <ul>[*]Menu di sinistra[*]..[*]..[/list]
    </div>
    <div id="footer">piede</div>
</div>

</body>
</html>

vorrei creare un box all'interno di content che avesse una larghezza massima di 30px, magari con un contorno che si affiancasse ada altri box qualora ci fosse spazio o altrimenti a capo... ho pensato che un fieldset potesse fare al caso mio invece si sta dimostrando più problematico del dovuto...cosa consigliereste voi?

**Kiantis** · 20-10-2006, 12:12

La massima soltanto con IE non penso te la prenda, ma a parte questo...
puoi provare un inline-block, ma per farlo funzionare servono due direttive per sgamuffare entrambi i borwser:

http://www.brunildo.org/test/inline-block3.html

**Whitecrowsrain** · 20-10-2006, 12:19

Originariamente inviato da Kiantis
La massima soltanto con IE non penso te la prenda, ma a parte questo...
puoi provare un inline-block, ma per farlo funzionare servono due direttive per sgamuffare entrambi i borwser:

http://www.brunildo.org/test/inline-block3.html

tu come faresti? (quali sono queste direttive per "sgamuffare"?)

**Kiantis** · 20-10-2006, 12:22

Quelle definite nell'esempio (il link che ho postato)
Cioe definire prima un
display: inline-block;
e poi
display: -moz-inline-box;
nello stesso
(o viceversa, non ricordo l'ordine)

Cosi entrambi i browser non si danno fastidio a leggere la proprietà.

L'inline-block è praticamente un blocco (e quindi ha un'altezza e tutto) ma viene messo inline insieme ad altri inline-block.

**Whitecrowsrain** · 20-10-2006, 12:40

Originariamente inviato da Kiantis
Quelle definite nell'esempio (il link che ho postato)
Cioe definire prima un
display: inline-block;
e poi
display: -moz-inline-box;
nello stesso
(o viceversa, non ricordo l'ordine)

Cosi entrambi i browser non si danno fastidio a leggere la proprietà.

L'inline-block è praticamente un blocco (e quindi ha un'altezza e tutto) ma viene messo inline insieme ad altri inline-block.

ti sembrerà stano ma con ie me li mette uno sotto l'altro...uff e in più il testo non va a capo automatico all'interno del box quando supera la massima larghezza sia con FF che va fuori del box sia con IE che allarga il box...come devo fare?

**Whitecrowsrain** · 20-10-2006, 12:46

allora i problemi con IE sono risolti, rimane che Firefox non manda a capo il testo se è più lungo di max-width ma lo manda fuori...come devo fare?

Discussione: <fieldset> impostare la larghezza massima

Strumenti discussione

Ricerca discussione

Visualizza

<fieldset> impostare la larghezza massima

Permessi di invio