CSS - Opacitet i IE8?

2010-10-22, 15:22 #1

Bannlyst

Kod:

opacity: 0.3;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;

Det här är min kod och det fungerar fint i Firefox men IE8 visar inte någon som helst opacitet. Diven blir 100 % synlig.

Varför?

Citera

2010-10-22, 15:51 #2

Medlem

Reg: Sep 2008

Inlägg: 1 118

Microsoft har ändrat syntaxen. För internet explorer 8 skall man skriva som följer:

Kod:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

Citera

2010-10-22, 16:10 #3

Bannlyst

Citat:

Ursprungligen postat av ei96byod

Microsoft har ändrat syntaxen. För internet explorer 8 skall man skriva som följer:

Kod:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

Jag testade det här innan och det fungerade inte då, så jag antog att det bara var någon dåligt informerad källa som jag hade läst ifrån då.

Aja, det fungerar i vilket fall fortfarande inte för IE8.

Citera

2010-10-22, 16:22 #4

Avslutad

Använd dig av jQuery för att sätta opacitet, den tar hänsyn till alla webbläsare och gör det på ett bra sätt.

Citera

2010-10-22, 16:46 #5

Medlem

Reg: Sep 2008

Inlägg: 1 118

Citat:

Ursprungligen postat av AdagioHouse

Jag testade det här innan och det fungerade inte då, så jag antog att det bara var någon dåligt informerad källa som jag hade läst ifrån då.

Aja, det fungerar i vilket fall fortfarande inte för IE8.

Har du en korrekt dokumentdeklaration i HTML-filen? Annars brukar det bli problem med sådana här saker. Annars kan du ju göra som Big B säger och använda dig av javascript istället. Då kan du få det att fungera i alla webbläsare, oavsett vilken det är.

Citera

2010-10-22, 17:01 #6

Bannlyst

Citat:

Ursprungligen postat av ei96byod

Har du en korrekt dokumentdeklaration i HTML-filen? Annars brukar det bli problem med sådana här saker. Annars kan du ju göra som Big B säger och använda dig av javascript istället. Då kan du få det att fungera i alla webbläsare, oavsett vilken det är.

Dokumentdeklaration? XHTML 1.0 Strict?

Citera

2010-10-22, 17:09 #7

Medlem

Reg: Sep 2008

Inlägg: 1 118

Citat:

Ursprungligen postat av AdagioHouse

Dokumentdeklaration? XHTML 1.0 Strict?

Ja t.ex.

Men mer intressant, är den korrekt skriven? Om det är något fel i den kan Internet Explorer tolka det som att det inte finns någon dokumentdeklaration, och gå in i "kompatibilitetsläge" eller vad det nu hette igen, och då kan konstiga saker hända.

Kan du posta HTML-koden också, samt ev. resten av css:en, så kan vi se om det ev. är något annat fel som orsakar problemet?

Citera

2010-10-22, 17:23 #8

Bannlyst

Citat:

Ursprungligen postat av ei96byod

Ja t.ex.

Men mer intressant, är den korrekt skriven? Om det är något fel i den kan Internet Explorer tolka det som att det inte finns någon dokumentdeklaration, och gå in i "kompatibilitetsläge" eller vad det nu hette igen, och då kan konstiga saker hända.

Kan du posta HTML-koden också, samt ev. resten av css:en, så kan vi se om det ev. är något annat fel som orsakar problemet?

Så här ser det ut:

HTML-kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">

All kod som berör #overlay:

HTML:

HTML-kod:

<div id="overlay"></div>

CSS:

Kod:

#overlay
	{

	  display: none;
	  z-index: 1;

	  opacity: 0.3;
	  filter: alpha(opacity=30);
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	  -moz-opacity: 0.3;
	  -khtml-opacity: 0.3;

	  position: absolute;
	  top: 0;
	  left: 0;

	  width: 100%;
	  height: 100%;

	  background-color: #000000;

	}

Javascript + jQuery:

Kod:

var overlay_active = 0;


function toggle_overlay_on()
  {

	if (overlay_active == 0)
	  {

		overlay_active = 1;

		$('#overlay').fadeIn(250);


	  }

  }


function toggle_overlay_off()
  {

	if (overlay_active == 1)
	  {

		overlay_active = 0;

		$('#overlay').fadeOut(250);


	  }

  }

Citera

2010-10-22, 19:16 #9

Medlem

Reg: Sep 2008

Inlägg: 1 118

Ah, vänta nu förresten. Jag kom just på att Internet Explorer 8 inte har stöd för opacitet i XHTML strict. Du får byta till XHTML transitional istället. Då skall det fungera.

Det var därför jag för länge sedan valde bort strict-varianten.

Citera

2010-10-22, 19:34 #10

Medlem

Reg: Sep 2008

Inlägg: 1 118

Såg nu också att du lagt nya "-ms-filter..." efter den gamla "filter...". Den måste ligga före om det skall fungera i alla varianter av IE.

Suck, internet explorer är alltid en sådan mardröm för en utvecklare.

Citera

2010-10-22, 19:44 #11

Bannlyst

Citat:

Ursprungligen postat av ei96byod

Ah, vänta nu förresten. Jag kom just på att Internet Explorer 8 inte har stöd för opacitet i XHTML strict. Du får byta till XHTML transitional istället. Då skall det fungera.

Det var därför jag för länge sedan valde bort strict-varianten.

Citat:

Ursprungligen postat av ei96byod

Såg nu också att du lagt nya "-ms-filter..." efter den gamla "filter...". Den måste ligga före om det skall fungera i alla varianter av IE.

Suck, internet explorer är alltid en sådan mardröm för en utvecklare.

Haha.. Internet Explorer alltså, vilken jävla hjärtekrossare till webbläsare det är.

Tack för tipsen, kompis! Jag ska testa det om ett par timmar efter att jag har varit hos tjejen.

Citera

2010-10-23, 00:44 #12

Medlem

Reg: Jan 2009

Inlägg: 1 390

Citat:

Ursprungligen postat av AdagioHouse

Haha.. Internet Explorer alltså, vilken jävla hjärtekrossare till webbläsare det är.

Tack för tipsen, kompis! Jag ska testa det om ett par timmar efter att jag har varit hos tjejen.

Internet Explorer är en jävla fitta. Inte ens i IE10 stöder de js-event vilket är helt stört.

Citera

CSS - Opacitet i IE8?

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in