Opacity op FB Like Box /Twitter / YouTube werkt niet in IE

[supervinnie40]

Ik ben bezig met een nieuwe website en daarbij maak ik regelmatig gebruik van de CSS Opacity functie.
Tot nu toe heb ik bijna de hele site zoals ik hem hebben wil, maar ik zit met 1 probleempjes…

Ik heb rechts onderin een Facebook Like Box, Twitter widget en Youtube widget ingevoegd. De DIV waar deze inzit heeft een Opacity van 0.4, bij een hover wordt dit 1 (volledig zichtbaar dus).
In Chrome/Firefox werkt het prima, maar het werkt niet in IE.

In Chrome en Firefox werkt alles naar behoren, maar als ik in IE kijk werkt de hele site goed, behalve die widgets. Die blijft op een Opacity van 0.4 staan.
Vreemd genoeg kun je de hover-eigenschap wel zien als je een paar pixels naast de Like Box gaat hangen met je muis. Je muis raakt dan net een randje van de onderliggende DIV, waardoor de Like Box ineens wel van 0.4 naar 1 Opacity gaat.
Maar als je over de Like Box zelf hover’t, dan gebeurt er niets.

Ik heb al geprobeerd om via CSS de DIV van de Like Box een Opacity van 1 te geven, en zelfs om dat te doen bij de Iframe. Maar dat werkt niet.
Ik dacht er ook al aan om de Like Box een Z-index van -20 te geven, zodat hij onder de DIV van de footer komt, maar als je er dan overheen gaat met de muis verdwijnt hij gewoon.

Ik weet wel iets van HTML en CSS af, maar niet genoeg om hier uit te komen.
Een link naar mijn website: http://bit.ly/1lMOcMu (site is nog onder constructie )

[MoietyMe]

IE <8 ondersteund geen gebruik van opacity: ;

Daar zul je filter moeten gebruiken: http://www.quirksmode.org/css/opacity.html

Dit had je natuurlijk ook makkelijk zelf kunnen opzoeken..

[Bosmonster]

Ligt eraan, weet niet welke versie van IE die bedoelt

Die widgets zijn allemaal iframes, kan ook zijn dat IE daar anders mee omgaat als het gaat om opacity/hovers.

Waar ik vooral op zou willen wijzen is het feit dat veel mensen tegenwoordig met een touch-device (zoals een iPad) surfen en daar zijn dit soort enorme (doelloze) hover-effecten over je hele site natuurlijk niet al te prettig.

[ Voor 40% gewijzigd door Bosmonster op 13-01-2014 09:53 ]

[supervinnie40]

Good Fella schreef op maandag 13 januari 2014 @ 09:25:
IE <8 ondersteund geen gebruik van opacity: ;

Daar zul je filter moeten gebruiken: http://www.quirksmode.org/css/opacity.html

Dit had je natuurlijk ook makkelijk zelf kunnen opzoeken..

Dat weet ik, daarom staat er in de CSS ook:
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);

Bosmonster schreef op maandag 13 januari 2014 @ 09:51:
Ligt eraan, weet niet welke versie van IE die bedoelt

Die widgets zijn allemaal iframes, kan ook zijn dat IE daar anders mee omgaat als het gaat om opacity/hovers.

Waar ik vooral op zou willen wijzen is het feit dat veel mensen tegenwoordig met een touch-device (zoals een iPad) surfen en daar zijn dit soort enorme (doelloze) hover-effecten over je hele site natuurlijk niet al te prettig.

Daar zit inderdaad wel iets in... Ik vindt het alleen erg lelijk ogen als ik de 3 Iframes niet dit opacity effect meegeef.
Of het doelloos is verschillen de smaken, ik vind het juist mooi en het een leuk extra effect geven. Hierdoor voorkom je ook dat mensen zich laten afleiden door iets dat wel vermeld mag zijn maar niet erg belangrijk is. (zoals de zijbalk).

[MoietyMe]

Waarom heb je dan drie van die enorme boxen op je website staan als je niet wilt dat ze veel aandacht trekken?

[supervinnie40]

Ik wil niet dat ze aandacht wegtrekken van de tekst op de pagina zelf. Men mag gerust weten dat ze er zijn, maar het moet niet de aandacht wegtrekken wanneer je naar beneden scrollt (om bijvoorbeel de tekst te lezen) en ze komen onderin in beeld.

Momenteel heb ik besloten om het hele thema te herschrijven. Er zaten veel te veel div's en andere onnodige dingen in dit ontwerp. Ik heb (bijna) alles nu herschreven en geprobeerd om het een stuk kleiner en 'lichter' te maken. In de hoop dat eventuele conflicten zo een stuk makkelijker weg te werken zijn.