Newsgroup: it.lavoro.professioni.webmaster
Titolo: Max-width e internet explorer

Ciao,
  non sono un esperto e nemmeno un professionista ma confido nella
vostra pazienza e disponibilita'. :-)
  Ho fatto il restyling di un sito in xoops che contiene delle colonne
di notizie. Siccome le immagini, dal vecchio stile, eran troppo larghe e
sbordavano, ho usato questa cosa qua:
td > .item img
{
  max-width: 200px;
}
  che immagino sia una stupidaggine sovrumana ma sembra funzionare (se
poi mi date delle dritte anche qui, non e' che mi dispiaccia!). :-)
  Il problema e' che su tutti i browser che ho provato va, compreso IE
8 di diversi computer di amici. Non va pero' su IE 8 del *mio*, dove
funziona solo se sostituisco max-width con width, ma ovviamente non e'
questo che voglio. Ho letto che max-width non e' supportato da IE ma da
quel che ho capito riguarda le versioni precedenti. :-/
  Possibile che il mio IE 8 (installato oggi, prima c'era il 6 che
sbordava anche lui) sia differente in qualche modo da quello di altri?
Forse s'e' tenuto qualche impostazione del vecchio 6, o manca qualche
service pack, o robe simili?
  Non riesco a capire, sinceramente, e mi piacerebbe sapere se il mio
sito va bene oppure no. :-(
  Qualche consiglio? E' corretto dare un max-width per determinate
immagini in questo modo?
  Scusatemi per le domande probabilmente sciocche ma mi interessa fare
un lavoro decente, ho cercato in rete e non son riuscito a risolvere.
  Grazie e un saluto a tutti,
-- 
Gianfranco Bertozzi
Linux User #183585

"Gianfranco"  ha scritto nel messaggio news:irh2oj$gji$2...@tdi.cu.mi.it...
<quote on>
  Il problema e' che su tutti i browser che ho provato va, compreso IE
8 di diversi computer di amici. Non va pero' su IE 8 del *mio*, dove
funziona solo se sostituisco max-width con width, ma ovviamente non e'
questo che voglio. Ho letto che max-width non e' supportato da IE ma da
quel che ho capito riguarda le versioni precedenti. :-/
</quote off>
max-width imposta la massima larghezza che può essere assegnata, ma non 
imposta la larghezza.  Prova aggiungendo anche width. 

 imposta la larghezza.  Prova aggiungendo anche width. 
  Con solo width va, avevo gia' provato. Pero' io volevo che la
larghezza di quelle immagini fosse variabile, non fissa. Ovviamente con
un massimo.
  Se li metto entrambi (ora non posso provare) non e' che poi ho tutte
le immagini a 200px?
  Tra l'altro, per alcune pagine (non le stesse di IE 8, tra l'altro)
pare che ora faccia lo stesso scherzo anche con Opera x linux. E ieri
invece andava bene. Non ci capisco piu' nulla. :-(
  Grazie dell'aiuto,



Ciò significa che ci sono altre cose che non vanno molto probabilmente. 

 quel che ho capito riguarda le versioni precedenti. :-/
Premi F12 e controlla nella "barra menu" della finestra che ti si apre se 
per caso non sei in modalita` compatibile.
Anche il ">" potrebbe darti rogne con IE < 8 o addirittura 9. Io tendo a 
usare quei qualificatori solo nei backend dove obbligo la gente a usare 
Firefox o Chrome. :)
Bye.

 usare Firefox o Chrome. :)
  Immaginavo che quel ">" potesse dar noia ma da bravo raffazzonatore
ho provato, ho visto che andava sul mio firefox e non me ne son piu'
preoccupato. Ora, chiaramente, i nodi vengono al pettine. :-p
  Spiego il problema, magari sai darmi un consiglio veloce: ho una
pagina con le anteprime delle notizie su tre colonne (le img da
ridimensionare ai 200px) mentre la notiza "piena" e' una colonna. La
struttura (creata dal CMS) e' questa:
<!-- anteprime in tre colonne -->
<div id="content">
  <table width= "100%">
    <tr>
      <td width="33%">
        <table class="item">
          Anteprima notizia con le img
        </table>
      </td>
      <!-- le altre due colonne al 33% -->
    </tr>
  </table>
</div>
  e il relativo css e':
td > .item img
{
  max-width: 200px;
}
<!-- notizia su una colonna -->
<div id="content">
  <table class="item">
    <tr>
      <td>
        <table>
          Notizia con le img
        </table>
      </td>
    </tr>
  </table>
</div>
  con css:
.item img
{
  max.width: 75%;    // oppure 600px
}
  Non so se possa essere una soluziona valida, sicuramente c'e' di
meglio. L'ho detto che non sono un esperto. :-)
  Grazie ancora di tutto. Un saluto,


 }
Questa dovrebbe venire "soppiantata" dalla precedente, che e` piu` 
specifica.
Bye.

 specifica.
  Se pero' la tolgo, nella parte "notizia unica":
<td>
  <table>
    Notizia
    le "img" avrebbero 'width' del 100%, no?
    Il problema e' che il layout vecchio permetteva foto piu' larghe
e ora, siccome la colonna s'e' strettita, le vecchie notizie sbordano
sia nelle anteprime che nella notizia "piena". Per questo cercavo di
metterci una pezza coi css.
  Grazie ancora,


     le "img" avrebbero 'width' del 100%, no?
Infatti non devi toglierla. Si arrangia lui a ignorarla quando non e` nel 
contesto giusto, perche` l'altra regola e` piu` specifica (c'e` un td 
davanti e specifichi che deve valutare la classe item solo quando e` 
associata a una table).
Bye.

 associata a una table).
  Allora avevo capito male. Dicevi la stessa cosa che pensavo io. :-)
  Grazie,


   Allora avevo capito male. Dicevi la stessa cosa che pensavo io. :-)
  Ho provato con un altro computer e devo confessare che piu' vado
avanti e meno ci capisco. In questo caso, c'e' installato IE9 e si vede
tutto perfettamente. Poi pigio "F12" e viene quella specie di firebug:
provo "compatibilita' IE8" e mi da' i soliti problemi di sbordamento che
ho col mio, idem con "IE7". Allora perche' gli amici che hanno IE8 lo
vedono bene? :-o
  Il problema e' che poi mi sborda anche con il default "IE9" mentre
prima non lo faceva. E modificando le max-width delle foto (da
"firebug") si vede che la foto rimpicciolisce ma le tre colonne
rimangono identiche (e sbordanti), quindi non sembrerebbe piu' un
problema di dimensione immagine ma di larghezza della colonna. :-o
  Mi sa che o io ho commesso un errore grave e non riesco a trovarlo, o
c'e' qualche problema col browser che (ipotizzo) tiene in cache qualcosa
che non dovrebbe. :-o
  E se vi chiedessi di dare un'occhiata al sito e dirmi come lo vedete
(oltre che offendermi la mamma per il lavoraccio), sarebbe troppo? :-o
  Nel caso, 
www.santuccirunning.it
 . :-)
  Grazie a tutti,


   Mi sa che o io ho commesso un errore grave e non riesco a trovarlo, o
  Mi sa che e' questo. Ho notato che le pagine dove sborda hanno una
  cosa tipo questa:
*******
* img *
*******Testo notizia
  cioe' l'utente che scrive la notiza non mette un CR (quindi un <br />)
dopo l'immagine. Firefox privilegia la larghezza del box e manda a capo,
IE e forse Opera invece allargano il box, che cosi' sborda e scompagina
tutto.
  Allora ho provato ad aggiungere un 'display: block;' al 'td table.item
img' e sembrerebbe andare. Sembrerebbe. :-)
  Sono i deliri dell'incompetente o ci puo' stare come spiegazione?
  Un saluto e grazie ancora,


   Sono i deliri dell'incompetente o ci puo' stare come spiegazione?
Sono deliri da incompetente se non sai perche` funziona! ;)
E` corretto. Di default le immagini sono "display:inline-block" (anche se 
questa definizione non e` accettata da IE, ma l'effetto e` quello). 
Rendendolo block gli fai occupare tutta la larghezza (non che l'immagine 
si allarghi, ma quello che c'e` prima e dopo viene spinto su e giu`, 
rispettivamente).
Sicuramente troverai definizioni fatte meglio della mia per la differenza 
tra block, inline e inline-block. :)
Bye.

 tra block, inline e inline-block. :)
  Sei stato chiarissimo! Ora spero solo di non trovare altri troiai in
quel sito, senno' ci passo male. =8-)
  Vorrei poter contraccambiare dell'aiuto che mi hai dato ma
sinceramente non ti conviene aver bisogno di me... ;-)
  Grazie a te e a tutti voi per la gentilezza e la disponiilita'.


   Beh... l'avevo detto io che non sono un professionista. ;-)
  Sono di nuovo a rompere perche' il problema in realta' non s'e'
risolto. Pensavo di si e invece con IE8 si continua a vedere male. Non
e' quindi piu' un problema di larghezza immagine (il max-width sistema
mozilla e affini) ne' di flusso (il display: block che sistema opera).
  Per varie prove fatte da amici pare che con IE9 si veda, mentre IE8 si
vede solo se e' in modalita' "compatibile". Altrimenti sborda. :-(
  Qualcuno ha qualche idea per poter risolvere il problema? Puo' servire
questa ultima informazione?
  Scusatemi ancora ma, a parte la voglia di fare un lavoro decente, a
questo punto mi piacerebbe anche capire cosa e' che non va! Possibile
che IE debba sempre crear problemi? :-(
  Grazie ancora. Un saluto,


 vede solo se e' in modalita' "compatibile". Altrimenti sborda. :-(
  Non so se puo' servire: l'ho trovato in rete e la soluzione e'
senz'altro pellegrina ma mettendo tra <head> e </head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  l'impaginazione sembra sia ok.
  Ora vedo se qualcuno si lamenta, al limite diro' che la colpa e' del
browser. ;-)
  Un saluto a tutti,
