• User Attivo

    [css] problema visualizzazione con IE

    sto impazzendo su questa pagina :arrabbiato:

    http://webtest2.altervista.org/css/

    la visualizzazione con firefox è ok!

    con IE invece il body centrale dà dei problemi.

    Se imposto la larghezza del container di 3 pixel in più (903 anzichè 900) il tutto si sistema (ma non perfettamente).

    Idem se imposto con width del div #filosofia-extrema 677 anzichè 680

    Insomma: qualcosa gli và stretto ma non riesco a capire cosa :mmm:

    Un aiutino?? 😄


  • Super User

    Ciao, 18andLiFe. Perché non provi a giocare un po' con le percentuali, anziché mettere le dimensioni fisse? Altrimenti ti conviene postare il codice... 🙂


  • User Attivo

    @Paola_mi said:

    Ciao, 18andLiFe. Perché non provi a giocare un po' con le percentuali, anziché mettere le dimensioni fisse? Altrimenti ti conviene postare il codice... 🙂
    ciao Paola! :ciauz:

    anzitutto grazie per la risposta 😉

    dici che con le % potrei risolvere? in genere tendo a non amarle molto :bho:

    intanto posto il css:

    [html]/stili per il layout fisso/
    html,body{margin: 0;padding:0}
    body{font: normal 11px Verdana;background:url("img/layout/main-background.gif") top left repeat-x;}
    div#container{width: 900px;margin: 0 auto;text-align: justify;background:url("img/layout/body-background.gif") top left repeat-y;}
    a:link {color:#923500;}
    a:visited {color:#923500}
    a:hover {color:#003052; text-decoration:none}

    /stili generici, su header e footer/
    div#header {width:900px;height:27px;}
    h1,h2{margin: 0;padding:0}

    /stili specifici per il layout/
    div#navigation{float:left;width: 220px;margin-top:27px !important;margin-top:0;background:green}
    div#content{margin-left: 220px;margin-top:27px !important;}
    div#footer{width:900px;clear:left;text-align:center; background:url(img/layout/footer-background.gif) top left repeat-x;padding:3px 0 3px 0; color: #fff;}

    /stili per la home page/
    div#content-home{margin-left: 220px;margin-top:31px !important; margin-top:0;}
    div#filosofia-extrema{width:680px !important;height:281px;background:url(img/filosofia-extrema/chiara_1.jpg) top left }
    div#presentazione-extrema{margin:0;padding:0;}
    div#presentazione-extrema p{margin:0;padding-right:4px;}
    div#servoscale-montascale-piattaforme{width:680px;background:blue;float:left}
    div#navigation p#menu{margin:0;padding:0;width:220px;height:350px;}
    div#navigation p#news{margin:0;padding:0;float:left;clear:right;width:220px;height:198px;}
    [/html]
    come dicevo, mettendo il div#filosofia-extrema a 677 in IE il corpo "sale"...ma non può comunque essere considerata una soluzione :():

    grazie a chi si prenderà la briga di guardare questa grana 😄


  • User Attivo

    Sembra un problema di Box Model.

    Nel div content-home hai: filosofia-extrema presentazione-extrema servoscale-montascale-piatatforme
    Nei tre div padding non ce ne sono.
    i vari width 680 + 220 del margin del content fa 900 e va bene.

    Probabilmente c'è qualche elemento interno con margin o padding che è male interpretato da IE. I vari divs non sembrano essere perciò vedo solo:
    div#presentazione-extrema p{margin:0;padding-right:4px;}
    e
    <img src="img/sede-extrema/sede-extrema-esterno.jpg" style="float:left;margin-right:4px;">

    Scommetto su **div#presentazione-extrema p: **prova a togliere il padding e vedi se tutto quadra perfettamente.

    :ciauz:


  • User Attivo

    Aspetta aspetta aspetta...

    Ma la parte centrale non ti si è sistemata in altezza?
    Ho visto solo ora che hai un leggero spazio sotto al contenuto centrale.


  • Super User

    Perché non ami molto le percentuali? hanno il vantaggio di mostrare il tuo layout perfettamente a qualsiasi risoluzione 🙂
    Cmq guarda... io quasi quasi ci rinuncio a capire IE, adesso sono incasinata anche io infatti posterò una richiesta...
    Mi spiace non poterti aiutare, ma per me IE resta uno dei misteri mondiali... 😞


  • User Attivo

    @Laburno said:

    Sembra un problema di Box Model.

    Nel div content-home hai: filosofia-extrema presentazione-extrema servoscale-montascale-piatatforme
    Nei tre div padding non ce ne sono.
    i vari width 680 + 220 del margin del content fa 900 e va bene.

    Probabilmente c'è qualche elemento interno con margin o padding che è male interpretato da IE. I vari divs non sembrano essere perciò vedo solo:
    div#presentazione-extrema p{margin:0;padding-right:4px;}
    e
    <img src="img/sede-extrema/sede-extrema-esterno.jpg" style="float:left;margin-right:4px;">

    Scommetto su **div#presentazione-extrema p: **prova a togliere il padding e vedi se tutto quadra perfettamente.

    :ciauz:
    ciao Laburno!
    sì, con IE mi si sballa in altezza...il **div#content-home....**dovrebbe posizionarsi subito sotto l'header invece va sotto il menù :():

    Avevo pensato anche io ad un problema di padding-margin ma mettendo tutto a zero non cambia nulla :arrabbiato:

    Il fatto è che i conti tornano (le varie somme danno 900px)...quindi non dovrebbero proprio esserci problemi..

    dovrebbero appunto....


  • User Attivo

    @Paola_mi said:

    Perché non ami molto le percentuali? hanno il vantaggio di mostrare il tuo layout perfettamente a qualsiasi risoluzione 🙂

    questo è verissimo 🙂

    tu metteresti tutto in percentuale?

    o il container lo posso lasciare fisso?

    Cmq guarda... io quasi quasi ci rinuncio a capire IE, adesso sono incasinata anche io infatti posterò una richiesta...
    Mi spiace non poterti aiutare, ma per me IE resta uno dei misteri mondiali... 😞

    lasciamo perdere... :rollo:

    però purtroppo resta ancora il broser più diffuso :bho:


  • User Attivo

    @18andLiFe said:

    ciao Laburno!
    sì, con IE mi si sballa in altezza...il **div#content-home....**dovrebbe posizionarsi subito sotto l'header invece va sotto il menù :():

    Avevo pensato anche io ad un problema di padding-margin ma mettendo tutto a zero non cambia nulla :arrabbiato:

    Il fatto è che i conti tornano (le varie somme danno 900px)...quindi non dovrebbero proprio esserci problemi..

    dovrebbero appunto....

    Ok allora prova a togliere il margin-left qui:

    
    div#content { margin-left: 220px; margin-top: 27px; !important;}
    
    

    :ciauz:


  • User Attivo

    [HTML]div#filosofia-extrema{float:left;height:281px;}[/HTML]

    togliendo il dimensionamento orizzontale a questo div e assegnando un float:left sembra che ora sia tutto ok :rollo:

    mmm ora devo capire perchè funziona 😄

    grazie mille ad entrambi comunque