Opacity i css får siden til å se ut som dritt i IE.

[Dimethyltryptamine]

Titlen sier alt.

 

Her er koden som blir brukt

 

 

a.linkopacity img {
filter:alpha(opacity=60);
-moz-opacity: 0.6; 
opacity: 0.6;
-khtml-opacity: 0.6;
}

a.linkopacity:hover img {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-khtml-opacity: 1.0; 
}

Siden ser fin ut i chrome og firefox.

 

Håper noen har noen forslag til hva jeg kan gjøre for å fikse det.

 

Link: -

Endret 31. juli 2011 av LSĐ

[Wedvich]

I Internet Explorer er ikke PNG-gjennomsiktighet og CSS opacity bestevenner akkurat, så derfor får du de svarte artifaktene rundt bildene som får alt til å se ut som bæsj. Tror den greieste løsningen for å få det til å se bra ut i Internet Explorer også er å ha to versjoner av hvert bilde; ett med 60% og ett med 100% opacity, og switche mellom dem på mouseover. Burde ikke være nødvendig med sånne løsninger lenger så langt som CSS har kommet nå, men... Internet Explorer er Internet Explorer. Så får vi heller se om MS holder det de lover om 9'eren

[Dimethyltryptamine]

Prøvde nå med å ha en egen css fil for personer som bruker IE.

Etter litt googling (Link) så fant jeg ut at denne koden her visstnok burde fungere.

 

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

 

 

og i ie-only.css har jeg fjernet hele opacitiy greia, men når jeg prøver siden i ie ser det fremdeles ut som den bruker den vannlige css filen

 

Har jeg gjort det er riktig, eller er det noe jeg har oversett?

Endret 8. juli 2010 av lordbost

[Wedvich]

Problemet er nok med måten du har gjort det på her:

 

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

Husk at CSS-filer blir gjort gjeldende etter hvert som de dukker opp i HTML'en, så det er de filene som kommer sist som får høyest prioritet som standard. Det som da skjer for deg nå er at om du er i IE, blir ie-only.css inkludert. Men etter det, uansett hvilken nettleser du har, blir web.css inkludert, og den overskriver alle stilene du allerede satte i ie-only.css, så IE-hacken din har i praksis ingen effekt.

 

Jeg vil heller anbefale at du lager en basis i web.css som fungerer i alle nettleserne, og så inkluderer du en ekstra CSS-fil med de ekstra tingene som IE ikke takler:

 

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

[Dimethyltryptamine]

Takk for hjelpen

 

Endte med å bruke den koden her:

 

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

[PHPdude]

Nei! Modifikasjonen din av Wedvich sitt forslag skaper bare masse problemer. Etter all sannsynlighet kommer du bedre ut av å holde deg til en struktur som dette:

 

<link rel="stylesheet" type="text/css" href="all-browsers.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix-old-ie.css" />
<![endif]-->

 

Her har du da først ett stilark, som alle nettleserne vil bruke. Der kjører du på med enkel CSS-kode etter standarden.

Etter den så er det et stilark som kun vil brukes av IE-versjoner mindre enn nummer 9. Der putter du inn disse ekstra "filter"-greiene for å få det til å fungere i IE6, 7 og 8.

 

En langt bedre fremgangsmåte for å være kompatibel med kommende IE-versjoner og for å slippe mest mulig unna duplisering av kode.

 

Merk også at -moz-opacity og -khtml-opacity nå er høyst unødvendig og frarådet i bruk. Alle (IE fra v9) støtter "opacity" direkte.

[Dimethyltryptamine]

Må si jeg er litt usiker på hva du mener, men bruker nå

 

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

 

 

Og har også fjernet -moz-opacity og -khtml-opacity

 

a.linkopacity img {
       filter:alpha(opacity=60);
       opacity: 0.6;
}

a.linkopacity:hover img {
       filter:alpha(opacity=100); 
       opacity: 1.0; 
}

[Bjonski]

Må si jeg er litt usiker på hva du mener, men bruker nå

 

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

 

Du skal ha det vanlige stilsettet øverst av de to.

Deretter skal du inkludere IE-stilsett.

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

[Dimethyltryptamine]

Hvis jeg gjør det, så ser siden sånn her ut:

Endret 8. juli 2010 av lordbost

[PHPdude]

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

 

 

<link rel="stylesheet" type="text/css" href="all-browsers.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix-old-ie.css" />
<![endif]-->

Det er flere forskjeller der som du må legge merke til.

 

 

Noe av meningen er at du ikke skal skrive koden din dobbelt opp som du har gjort hittil. Alt av CSS putter du i "all-browsers.css" også trenger du da bare å legge inn akkurat det du trenger for å fikse opacity for IE i "fix-old-ie.css". Ikke noe mer.

 

Også er det lurt å sikre at kodens ens vertfall er sånn noenlunde grunnleggende riktig før man ber andre om hjelp:

http://validator.w3.....com%2Fstart%2F

 

Skjønner godt hvis du begynner å føle at dette blir mye stress for noe som du forsåvidt har fått til å fungere allerede. Kan bare si at desto bedre du lærer deg disse tingene, jo enklere vil du få det i lengden.

[Dimethyltryptamine]

Men det jeg har gjort for å "fikse" det er bare å fjerne det helt i css filen for ie.

[PHPdude]

Det jeg så at du hadde gjort i stad var putte den IE-spesifikke "hacken" inn i det stilarket som alle nettleserne skal ha. Det blir da bare dobbelt dumt.

I "all-browsers.css" (eller hva du nå velger å kalle den), så skal du kun ha "opacity". Ikke den IE-spesifikke "filter", den kan du da bare fjerne helt.

 

Hvis du ikke skal ha noen alternativ CSS for å fikse opacity i IE8, trenger du vel ikke å ha noe ekstra spesial-stilark i det hele tatt. IE8 støtter ikke "opacity" og vil da bare ignorere den.

[Dimethyltryptamine]

Personer som ikke bruker IE får nå et stillark som heter not4ie.css

 

og inni den css filen er det kun disse linjene.

 

a.linkopacity img {
       filter:alpha(opacity=60);
       opacity: 0.6;
}

a.linkopacity:hover img {
       filter:alpha(opacity=100); 
       opacity: 1.0; 
}

 

 

 

Jeg gikk også igjenom og fikset alle feilene her:

http://validator.w3.org/check?verbose=1&uri=http://lordbost.com/start/

 

 

Ser det ok ut, eller har jeg misforstått alt?

[PHPdude]

Nei, men tror ikke du har forstått tankegangen helt. Du bør ikke lage stilark for ikke-IE-nettlesere. Lag heller et stilark for alle nettlesere (all-browsers.css), og, om nødvendig, lag et ekstra stilark kun for IE (eller kun for eldre versjoner) av IE, hvor du legger inn spesial-CSS for IE, som da kommer i tillegg til at også IE skal bruke "all-browser.css".

 

Mer praktisk konkret:

1. "not4ie.css" er et veldig upassende navn, som bare lurer en inn i feil tankegang. Kall den heller for "all-browser.css", "style.css" eller noe sånt.

2. "filter" er ikke CSS, men en proprietær IE-spesifikk utvidelse, som du da ikke plasserer i "all-browsers.css". Etter hva du skriver så virker det ikke som du skal ha den med i det hele tatt.

 

 

EDIT: Det stilarket du har nå for IE, som heter "web.css", skal du da altså kunne fjerne helt.

Endret 8. juli 2010 av PHPdude

[Dimethyltryptamine]

Ok, nå tror jeg at jeg har det riktig.

 

Fjernet

 

filter:alpha(opacity=100); 

og

filter:alpha(opacity=60);

 

limte inn

 

a.linkopacity img {
       opacity: 0.6;
}

a.linkopacity:hover img {
       opacity: 1.0; 
}

 

inn i web.css og deretter slettet jeg not4ie.css

 

Og nå bruker jeg kun et stilark

 

<link rel="stylesheet" type="text/css" href="web.css" />

 

og alt ser ut til å virke