• User

    correggere differenze visualizzazione ie7 e ff

    Salve,
    ho qualche problemino con la visualizzazione del mio blog (wordpress 2.8.4). da qualche tempo sono passata a firefox ma ora mi sono accorta (facendo un test su browsershots) che c'è qualche errore con internetexplorer. con ie8 pare tutto ok ma con la versione 7 qualcosa è sballato.*
    margin:left* per dare una spaziatura e centrare un elemento e
    line-height impostato uguale a height per centrare il testo verticalmente
    non hanno nessun risultato con ie7...
    Se provo a cambiare "a favore" di ie la visualizzazione con ff si sballa...
    Qualche suggerimento?
    Gli elementi sono>
    il menu in header (con ff ok, con ie7 le voci sono spostate in basso);
    l'archivio nella sidebar (con ff ok, con ie7 spostato a sinistra);
    il badge di flickr nella sidebar (con ff ok, con ie7 spostato a destra).
    Grazie!!!

    pan
    [...]


  • User

    Prova a creare due css e con un commento condizionale dire al browser quale dei due è per ie.
    Eccoti un esempio:

    <link rel="stylesheet" type="text/css" href="/stile.css"/>
    
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/stile-ie.css"/>
    <![endif]-->
    
    

  • User

    Grazie Akela86, faccio una prova e vedo come va...
    Nel frattempo ho letto qualcosa anche sulla regola !important e facendo una prova sul badge di flickr mi pare funzioni (ho specificato questa regola per il margin-left:...px per ff e impostato margin:0 auto er ie...).
    Quale pensi sia la soluzione migliore?
    Comunque ora provo tutto!
    Grazie 🙂


  • User

    Non conoscevo !important ma leggendo vedo che utilizzare questa regola per adattare un css a diversi browser non è il suo uso corretto, perché si va a sfruttare il fatto che ie non interpreta questa regola.
    I commenti condizionali invece, per quel che so sono nati appositamente per risolvere problemi di compatibilità.


  • User

    Ciao, ho fatto qualche prova ma non riesco a capire dove sbaglio...puoi aiutarmi?
    Per l'archivio e il badge di flickr nella sidebar ho risolto con comandi diciamo compatibili con entrambi i browser, forse ora è ok...
    Sto cercando di seguire il tuo consiglio sui commenti condizionali per il menu in header ma non mi funziona!
    Ho provato così:
    -creato un secondo foglio di stile "style-ie"
    -inserito nel nuovo "style-ie" la regola per ie
    -aggiunto nell'header (tra <head></head>)
    [html]<!?-[if IE]><link rel="stylesheet" href="style-ie.css" type="text/css" /><![endif]?->[/html]...ma non succede niente, dove ho sbagliato?
    grazie 🙂


  • User

    Il codice che hai riportato l'hai messo sopra o sotto al collegamento al css per tutti gli altri browser?
    Il css per ie va inserito sotto a tutti gli altri perché i browser se trovano due attributi uguali per lo stesso elemento adottano l'ultimo letto.


  • User

    L'ho messo sotto...
    [html]
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

    <!?-[if IE]>
    <link rel="stylesheet" href="style-ie.css" type="text/css" />
    <![endif]?->
    [/html]...giusto così?
    Eppure non modifica niente... 😞


  • User

    A questo punto non so cosa altro dirti, a me in questo modo le cose funzionano.
    Non so, prova ad inserire solo lo stile nel commento condizionale per vedere se ie riesce a leggerlo o a fare qualche altro test di questo tipo per capire dove sta il problema.
    Forse le cose cambiano quando si inserisce il collegamento al css tramite il php...
    Aspettiamo il parere di qualcuno più esperto.


  • User

    Ok, grazie Akela86 🙂
    ...continuo a fare qualche prova e vedo se arrivo da qualche parte...


  • User

    Se proprio questo metodo non va opta per !important, almeno anche se non è il migliore dei metodi funziona:x.


  • User

    Ehm...mi sono un po' bloccata, accetto ben volentieri qualche buon consiglio per aggiustare il menu!
    Il menu nell'header è questo:
    [html]
    <ul id="nav">
    <li><a href="#" class="nav-home">home</a></li>
    <li><a href="#" class="nav-info">info</a></li>
    <li><a href="#" class="nav-link">link</a></li>
    <li><a href="#" class="nav-rss">feed</a></li>
    </ul>
    [/html]...il css:
    [html]
    #nav {
    position:absolute;
    font-family:"Courier New", Courier, monospace;
    font-size:1.8em;
    font-weight:bold;
    text-align:center;
    list-style:none;
    width:492px;
    height:70px;
    line-height:70px;
    right:50px;
    bottom:-20px;
    }
    li {
    float:left;
    }
    .nav-home {
    display:block;
    float:left;
    width:123px;
    height:70px;
    font-size:1em;
    font-weight:bold;
    color:#7a637a;
    text-decoration:none;
    }
    .nav-home:hover{
    background-image:url(img/nav-over.png);
    background-repeat:no-repeat;
    background-position:center center;
    }
    [/html]Ora, i vari home, link, ecc. in ie sono spostati in basso e vorrei fossero centrati come in ff. Ho provato aggiungendo margin-top:-30 ma ok in ie e troppo alto in ff...
    Riesci a suggerirmi qualcosa anche con !important?
    Grazie dell'aiuto 🙂


  • User

    Se il problema riguardante la degradabilità è tutto su quel menù io ti consiglierei di cambiarlo, magari con una cosa del genere:

    [html]<div id="menu">
    <a href="#" class="nav-home">home</a>
    <a href="#" class="nav-info">info</a>
    <a href="#" class="nav-link">link</a>
    <a href="#" class="nav-rss">feed</a>
    </div>[/html]Assegnando il display:block alle anchor contenute nel div #menu le tratti come degli elementi blocco e puoi quindi assegnargli proprietà dimensionali (altezza e larghezza) così da poterle allineare come vuoi.

    Inoltre, vista la sua semplicità e il fatto che i browser trattano praticamente alla stessa maniera div ed anchor, questa soluzione è facilmente degradabile e, personalmente, la trovo anche più pratica del menù ul li in quanto ti consente di risolvere tutto con al massimo una decina di righe di css.


  • User

    Fatto!
    Grazie **Blancks **:) ho seguito il tuo consiglio e risolto la visualizzazione...Ora è tutto ok!
    Grazie anche a Akela86 per avermi dato una mano.
    :ciauz: