[html + css] "dostosowanie" strony do przeglądarki (?), na FF jest prawie dobrze - na IE... kicha Opcje

[roobik]

Witam!
Postanowiłem się nieco "pobawić" w przezroczyste napisy na zdjęciach:

Kod

<style>
P.photo {
    FONT-SIZE: 10px; FLOAT: left; MARGIN: 1px 0px 1px 1px; POSITION: relative
}
P.photo A {
    COLOR: red
}

P.photo SPAN.box {
     WIDTH: 170px; BACKGROUND: url(OBRAZKI/tlo_gray.png); FILTER: Alpha(Opacity=10)
}


P.photo SPAN.links {
    DISPLAY: block; PADDING-TOP: 1px
}
.photo STRONG {
    DISPLAY: block; FONT-SIZE: 120%; PADDING-BOTTOM: 2px
}
.photo SPAN {
    BACKGROUND-COLOR: url(OBRAZKI/tlo_gray.png) FILTER: Alpha(Opacity=90); WIDTH: 150; HEIGHT: 35; PADDING-RIGHT: 1px; PADDING-LEFT: 0px; LEFT: 1px; PADDING-BOTTOM: 3px; BOTTOM: 3px; PADDING-TOP: 2px; POSITION: absolute
}
</style>



<TABLE width=585 border=1 align=center vAlign=top>
<tr>
<td width=180 align=center>
<DIV>
<P class=photo><A href="111"><IMG  height=130
alt=""
src="OBRAZKI/!testowy.jpg"
width=170><BR></A><SPAN class=box><A href="222"><STRONG>TYTUŁ</STRONG><BR>TEKST</A></SPAN></P>
</DIV>
</td>
</tr>
</table>

częśćjest "zapożyczona" z interii. Celem jest, by zdjęcie miało efekt taki, jaki jest właśnie na interii na stronie głównej ("Warto zobaczyć")
Czy mógłby mnie ktoś naprowadzić co mam źle, że IE tego nie widzi, a na FF i Operze jest niemal ok?

Próbowałem czegoś takiego:

Kod

<script type="text/javascript">

function _opacity(id, o) {
  var obj = document.getElementById(id).style;
  obj.MozOpacity = (o / 100); // Mozilla i FireFox
  obj.KhtmlOpacity = (o / 100); // Safari < 1.2
  obj.opacity = (o / 100); // Safari 1.2, nowszy FireFox i Mozilla
  obj.filter = "alpha(opacity=" + o + ")"; // Internet Explorer
}

</script>

ale to nic nie dało...
Pomóżcie proszę... (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)

[tommy4]

Sam używam tego drugiego sposobu.

Kod

function setOpacity(what, opacity)
{
    var objst = document.getElementById(what).style;
    objst.opacity = (opacity / 100);
    objst.MozOpacity = (opacity / 100);
    objst.KhtmlOpacity = (opacity / 100);
    objst.filter = "alpha(opacity=" + opacity + ")";
}

Działa jak natura chciała, więc pewnie masz błąd w innej części skryptu.

Możesz zobaczyc tutaj: http://tommy4.gtacartel.com

Podejrzewam, że musisz po prostu dodać w css:

opacity: <x>;-moz-opacity: <x>; -khtml-opacity: <x>; filter: alpha(opacity="<x>");

BO Z TEGO CO WIDZĘ U CIEBIE WIDNIEJE TYLKO "FILTER: Alpha(Opacity=90);" (działa tylko w IE) i to w dodatku bez średnika na początku oddzielającego background od filtra.

AHA, no i ten kod wyżej to oczywiście funkcja, musisz ją wywołać poprzez setOpacity("id_obiektu", 100), gdzie 100 jest dowolną liczbą z zakresu od 0 do 100. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) Taka funkcja przydaje się szczególnie przy dynamiczniej zmianie przeźroczystośći obiektu, np. po najechaniu myszą. Ale skoro ty chcesz dodać tylko do CSS to tak jak wyżej.

Ten post edytował tommy4 28.05.2007, 19:08:10