[Risolto] Errata visualizzazione su IE 11

[ilmagowalter]

Ciao,
mi sono accorto che i banner laterali del mio sito posizionati creando una nuova posizione nel template e poi piazzati tramite css, si vedono nella giusta posizione su firefox o chrome
ma in un'altra posizione su internet explorer 11 ( non so le precedenti versioni )

il link del sito è
http://www.ilbrivido.it

avete qualche suggerimento ? immagino che ci sia qualcosa nel css di non compatibile con IE...

[ilmagowalter]

nessuno che mi possa dare una indicazione ?

[conti1]

ciao creare l'apposito css x il solo ie che da problemi

esempio

<!--[if IE 7]><link rel="stylesheet" type="text/CSS" href="stile-per-IE7.css">
<![endif]–>

e poi ti crei il foglio css

• <!--[if IE]> – tutte le versioni di Internet Explorer;
• <!--[if IE 7]> – versione 7 di Internet Explorer;
• <!--[if !IE 6]> – tutte le versioni tranne la 6 di Internet Explorer;
• <!--;[if gt IE 7]> – tutte le versioni superiori alla 7 (esclusa) di Internet Explorer;
• <!--[if gte IE 7]> – tutte le versioni superiori alla 6 (compresa) di Internet Explorer;
• <!--[if lt IE 8]> – tutte le versioni inferiori alla 6 (esclusa) di Internet Explorer;
• <!--[if lte IE 7]> – tutte le versioni inferiori alla 6 (compresa) di Internet Explorer.

[ilmagowalter]

grazie, ora me lo studio
e immagino posso anche mettere il ramo else per utilizzare i css che uso ora, giusto ?

[conti1]

perche else?
scusa ma non ti basta l'if della riga?
<!--[if IE 7]>
esempio creo il foglio x ie 7
se io guardo il tuo sito con ie11 il foglio del css ie 7 non viene richiamato  , viene richiamato se io  utente visualizzo il tuo sito con ie7.

[ilmagowalter]

quindi se io ho ad esempio

<link rel="stylesheet" type="text/CSS" href="template.css">
<link rel="stylesheet" type="text/CSS" href="personal.css">
<!--[if IE 7]><link rel="stylesheet" type="text/CSS" href="stile-per-IE7.css">
<![endif]–>

il foglio template e personal vengono richiamati sempre
il foglio per ie7 viene richiamato solo con ie7...in questo foglio verranno ridefinite le classi per sistemare la visualizzazione del banner e così dovrebbe funzionare
ma se l'ordine fosse al contrario non servirebbe un "else" ?

<!--[if IE 7]><link rel="stylesheet" type="text/CSS" href="stile-per-IE7.css">
<![endif]–>
<link rel="stylesheet" type="text/CSS" href="personal.css">
<link rel="stylesheet" type="text/CSS" href="template.css">

se mi trovo con ie7, prima carica il foglio di ie7 e poi carica cmq gli altri due che hanno le stesse classi ridefiniti con gli altri valori...o mi sto perdendo qualcosa ?

[conti1]

ciao non centra chi viene caricato  per prima  e il browser che fa fede ripeto se io guardo il tuo portale con ie7 usero  sia il css di default che quello personalizzato , ameno che tu faccia tutto il css dentro quello personalizzato , che non serve in quello personalizzato ci metti solo il css  per sistemare la visione che sballa.
se controlli con firebug vedrai  che i css si sofrascrivono.

[ilmagowalter]

finalmente ho avuto tempo di mettere mano
allora ho provato come hai detto tu quindi ho inserito nella sezione head

Codice: [Seleziona]

<!--[if IE]><link rel="stylesheet" type="text/CSS" href="http://localhost/ilbrivido/templates/protostar/css/stileperIE.css"><![endif]-->
però quando analizzo l'elemento con IE, e vado a vedere la classe...vedo che usa quella definita nel personal.css
non capisco cosa sbaglio...devo cambiare il nome della classe ?
ho anche messo il percorso assoluto per esser sicuro che il file venga trovato
in realtà quel che a me sembra è che il file css non venga proprio caricato

sto usando IE 11

[conti1]

ciao dove lo hai messo che  non lo vedo,  vedo solo questo nel tuo file html

Codice: [Seleziona]

<!--[if lt IE 9]> <script src="/media/jui/js/html5.js"></script> <![endif]-->

[ilmagowalter]

era in locale, adesso l'ho uppato anche online
è messo proprio sotto la riga che hai visto tu

[conti1]

ok ora c'è
ma scusa una domanda banale dici che in firefox  e chrome si vedono perfetti
iocon firefox il banner sx lo vedo  sopra il template
e che oh una risoluzione alta

[ilmagowalter]

io sto a 1920x1080

[conti1]

pure io,  e tu quel banner lo vedi giusto?  firefox chrome opera  ie la visione non cambia

[ilmagowalter]

si, lo vedo bene
guarda l'allegato...stessa cosa su chrome

[ilmagowalter]

ma tu sei riuscito a capire perchè su ie analizzando elemento, si vede che la definizione della classe la prende sempre da personal.css e non da stileperie.css ?

[ilmagowalter]

anche un'altra persona mi ha detto che vede male con chrome...ma io lo vedo bene...non capisco 

[ilmagowalter]

https://msdn.microsoft.com/library/hh801214%28v=vs.85%29.aspx

ragazzi i commenti condizionali non sono più supportati a partire dalla versione 10 di IE..

adesso non so più cosa fare per questi due banner laterali...uff

[conti1]

provare x credere su quel che hai letto
modifica il css che nel  css x ie11
come lo vedi qui sotto
.floating_banner_left {
    left: 130px;
    top: 307px;
  position: fixed;
}

e poi prova  a guardare il sito vedrai che funziona

se leggi attentamente il post da te postato quella stringa  fa si che guardando il tuo web con ie qualsiasi lo fa vedere come ie9

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

tu non devi forzare con quale vesione impostare la visione ma  sistemare il css che molto diverso.
inanzitutto inia a sistemare  il css x vederlo giusto in chrome firefox poi controlla in  ie
vedi che sballa anche in ie adge

ma poi xche metti il bnner sx quando hai una colonna dx nel template vuota io non vi capisco i problemi ve li create .
ps: comunque se il teplate e fatto a doc non c'è bisogno  di fix x altri browser

[ilmagowalter]

sul discorso dell'emulare IE9 sono d'accordo, ho postato il link solo perchè lì ho trovato che i commenti condizionali non sono supportati, non intendo emulare niente...vorrei che funzionasse con un unico css anzi...
tra l'altro la cosa è strana perchè dal mio pc con 1920x1080 vedo perfettamente i due banner nella posizione corretta a filo con il container centrale sia con firefox che con chrome, mentre con IE 11 sballa un pò
su quello che mi hai suggerito non ho ben capito, secondo te dovrei modificare il css dove definisco .floating_banner_left oppure l'eventuale css per IE
al momento ho modificato quello originale con i valori da te suggeriti...tu come lo vedi ?

[conti1]

eccolo  su firefox chrome e anche su ie11 si vede giusto

probabile che tu lo vada sempre giusto prova a toglere il css appena modificato e poi  svuota lachache del tuo pc

[ilmagowalter]

ma sei sicuro che hai la mia stessa risoluzione ?
io invece lo vedo molto più spostato a sx su tutti i browser... 

[conti1]

guarda con monitor 17
comunque sia la posizione sx non e giusta se stringi il monitor e come non aver il css di posizione
viao qui http://quirktools.com/screenfly/ metti il tuo link del sito cosi vedi cosa succede con le varie misure sia pc telefoni  ecc...

[ilmagowalter]

bello questo strumento, vedo che anche il banner di destra al diminuire della risoluzione non si sposta verso il container
io ho definito le posizione in questo modo subito dopo la position-7 ( ricordo template protostar )

Codice: [Seleziona]

                <div class="floating_banner_left">
                <jdoc:include type="modules" name="position-float-left" style="none" />
                </div>           
                <div class="floating_banner_right">
                <jdoc:include type="modules" name="position-float-right" style="none" />
                </div>           
ma a sto punto che mi consigli ? definire nel css per ogni risoluzione presente in quello strumento la posizione in pixel dei due banner ?
però mi pare che sia troppo astrusa come soluzione.possibile che non ci sia un modo per far posizionare i banner in maniera relativa al container centrale ?
scusatemi se dico castronerie

[ilmagowalter]

questo screenfly però non mi sembra preciso al 100%
quando seleziono iphone 6 mi fa vedere cose diverse da quelle che vedo con il mio iphone 

[ilmagowalter]

come non detto basta refreshare

comunque quello che succede ( notato ridimensionando una finestra di browser ) è che al diminuire della dimensione della finestra i due banner laterali rimangono fissi nelle loro posizioni
quindi direi che è questo il problema principale, non c'è un modo per fargli variare la posizione in relazione alla risoluzione ? Il container principale in effetti si sposta con il diminuire della risoluzione fino a ridursi quando non entra più nella finestra ( cosa che fa con le media queries css )
basterebbe dirgli stai accanto al container scostato di xx px

nella index le posizioni sono state definite all'interno del div del container..

[ilmagowalter]

allora,
ho risolto il problema della posizione modificando il css

Codice: [Seleziona]

.floating_banner_left {
    left: -924px;
    top: -605px;
  position: relative;
}
.floating_banner_right {
    left: 224px;
    top: -1210px;
  position: relative;
}
con position:relative, i banner seguono il container e quando la risoluzione è troppo piccola li faccio scomparire

c'è solo una cosa che non so come fare...vorrei bloccarli verticalmente...è possibile ? ( lo avevo fatto usando position:fixed ) ma adesso non posso più

[ilmagowalter]

ragazzi, c'è da impazzire....
sembrava risolto...ma pare che posizionando i banner in questa maniera ci sono alcune parti del sito non più cliccabili...come se fossero sovrapposte...sembrava che avevo risolto

tutto quello che c'è nel riquadro colorato non è cliccabile
help please

[ilmagowalter]

diciamo che con un z-index:-1 son tornate cliccabili le cose

[ilmagowalter]

anche se c'è stata scarsa partecipazione, per completezza di informazione, ho risolto...
...accantonando per il momento la modifica fatta da me e utilizzando l'estensione

http://extensions.joomla.org/extensions/extension/style-a-design/modules-panel/buaxua-floating

ciao e grazie