[CSS]Larghezza automatica

[jeck]

Ciao, ho un div con position: absolute; all'interno ci sono altri div a cui ho dato il width: auto; questi div all'interno hanno solo testo, vorrei che tutti avessero la larghezza identica al più lungo. Su FF funziona correttamente, mentre su IE no, ogni div becca la larghezza del testo interno. Non c'è un modo per farlo largo in modo automatico? Ho provato a mettere anche width: 100%; ma non va ugualmente.

[gabar-el]

posta un pò di codice, le cose saranno più chiare...

[jeck]

Questo è il css

.sCat{
    position: absolute;
    display:none;
    top: 195px;
    min-width: 120px;
    width: auto !important;
    width: 120px;
    border: 1px solid #FF0022;
}
.listaSCat{
    width: auto;
    height: 25px;
    padding: 4px 1px 0 1px;
    text-align: center;
    vertical-align: middle;
    color: White;
    font-weight: bold;
    border: 1px solid #b5b2b2;
}

E questo è il codice html, è un menù con il sotto menù. Cliccando su una delle prime 2 voci di link, permette di visualizzare il sotto menù.

<div class="listaCat" style="background-color:#555555;" id="l0">
	home
</div>
<div class="listaCat" style="background-color: #000099;"  id="l1">
	Trofeo Lucarini 2008
</div>
<div class="listaCat" style="background-color: #2299FF;"  id="l2">
	Toscano Supermotard 2008
</div>

<div class="sCat" id="dis0">
	<div class="listaSCat" style="background-color: #000099;"  id="l1">Cat. S1 S2</div>
	<div class="listaSCat" style="background-color: #000099;"  id="l2">Cat. S3 S5</div>
	<div class="listaSCat" style="background-color: #000099;"  id="l3">Cat. S4</div>
	<div class="listaSCat" style="background-color: #000099;"  id="l4">Cat. S6</div>
</div>
<div class="sCat" id="dis1">
	<div class="listaSCat" style="background-color: #2299FF;"  id="l15">cat. 125 e PIT BIKE</div>
	<div class="listaSCat" style="background-color: #2299FF;"  id="l16">cat. SPORT</div>
	<div class="listaSCat" style="background-color: #2299FF;"  id="l17">cat. PRESTIGE</div>
</div>

[gabar-el]

non so se ho capito bene, ma non puoi dare un width di 90% a questi div che vuoi uniformare in modo che appunto siano larghi tutti uguali?

[jeck]

Originariamente inviato da gabar-el
non so se ho capito bene, ma non puoi dare un width di 90% a questi div che vuoi uniformare in modo che appunto siano larghi tutti uguali?

Si esatto, ma non al 90%, ma al 100% I div chiamati listaSCat devono essere tutti larghi uguali, quello con più testo decide la larghezza di sCat (perchè si estende in automatico) e gli altri listaSCat devono seguirlo

[gabar-el]

non puoi farlo come pretendi tu, devi adattarlo. Osservi il testo più lungo e ne stabilisci la larghezza, poi rendi gli altri uguali. Questo ovviamente è ciò che credo io... puoi sempre rimanere in attesa di altre risposto da parte di persone più esperte...
ciao

[jeck]

Originariamente inviato da gabar-el
non puoi farlo come pretendi tu, devi adattarlo. Osservi il testo più lungo e ne stabilisci la larghezza, poi rendi gli altri uguali. Questo ovviamente è ciò che credo io... puoi sempre rimanere in attesa di altre risposto da parte di persone più esperte...
ciao

Cioè dovrei gestirlo tramite javascript?

[gabar-el]

direi di si, o qualche altro linguaggio, ma credo js sia il più appropriato...

[Mich_]

E` un problema noto di IE, che l'attributo width funziona come se fosse min-width, mentre gli attributi min-width e max-width non vengono interpretati. Questo se lavora in quirks mode (modo retrocomatibile); se lavora in standard mode, la cosa non si dovrebbe ripresentare.

IE lavora in standard mode solo se si usa la DTD XHTML 1.0 strict (con ancora qualche problema residuo in IE6).

Esistono degli hack in JS che simulano la width anche in IE; si trovano nei siti che trattano di hack per IE, e forse c'e` qualche thread in questo forum che li affronta (prova a fare un "cerca" nel forum). Chiaramente tali hack vanno inseriti tramite commenti condizionali, in modo che lavorino solo quando c'e` la necessita`.

[jeck]

Originariamente inviato da Mich_
E` un problema noto di IE, che l'attributo width funziona come se fosse min-width, mentre gli attributi min-width e max-width non vengono interpretati. Questo se lavora in quirks mode (modo retrocomatibile); se lavora in standard mode, la cosa non si dovrebbe ripresentare.

IE lavora in standard mode solo se si usa la DTD XHTML 1.0 strict (con ancora qualche problema residuo in IE6).

Esistono degli hack in JS che simulano la width anche in IE; si trovano nei siti che trattano di hack per IE, e forse c'e` qualche thread in questo forum che li affronta (prova a fare un "cerca" nel forum). Chiaramente tali hack vanno inseriti tramite commenti condizionali, in modo che lavorino solo quando c'e` la necessita`.

Se io scrivo una cosa del genere

.sCat{
    position: absolute;
    display:none;
    top: 203px;
	min-width: 130px;
    width: auto;
    border: 1px solid #FF0000;
}
.listaSCat{
  	min-width: 130px;
    width: auto;
    height: 19px !important;
    height: 25px;
    padding: 4px 1px 0 1px;
    text-align: center;
    vertical-align: middle;
    color: White;
    font-weight: bold;
    border: 1px solid #b5b2b2;
}

sCat si allarga per tutta la pagina, e di conseguenza anche listaSCat. Se cambio il DTD mettendo strict anche IE7 lavora male. Ora provo l'hack, ma non sarà facile risolvere senza js, avevo già provato altre volte e non ha mai funzionato a dovere