Problem z opacity i float w przeglądarce opera, Zadanie dla masta od opery Opcje

[Pilsener]

Mam dość ciekawy problem, otóż taki sobie powiedzmy kodzik:

Kod

<style type="text/css">

body {background: khaki;}

#abc {
width: 400px;
background: green;
opacity: 0.75;
}

big {
display: block;
float: left;
font-size: 300%;
background: yellow;
}
</style>

<div id="abc">
<p>
<big>P</big>
osuere. Quisque urna. Cras ut wisi. Phasellus dignissim. Pellentesque habitant morbi tristique bibendum, urna nec dui. Morbi egestas, justo arcu, pellentesque sagittis porttitor. Nulla semper. Morbi felis ut augue. Praesent elit laoreet enim. Maecenas pellentesque eget, condimentum faucibus arcu vitae wisi augue sit amet sagittis libero. Aliquam eleifend, ligula. Nulla.
</p>
</div>

Niby wszystko jest ok, ale:

1. Warstwy mieszają się (zielony z żółtym), ale tylko dla elementów liniowych! (stąd display:block musiałem dać)
2. Kiedy dodam float:left warstwy znowu się mieszają, niezaleznie od tego, czy dałem display:block czy nie

Ratunku!

[gekon]

Opacity jest dziedziczone i nic z tym nie można zrobić.

[Pilsener]

To, że jest dziedziczone, nie tłumaczy zachowania opery.

Podobnie jeśli mam:

Kod

<div id="glowny">
   <div id="lewy"></div>
   <div id="prawy"></div>
   <div id="srodek"></div>
</div>

I nadam opacity divovi głównemu, to divy nakładają się, ale tylko częściowo! (trzeba się nakombinować z ujemnymi marginesami, żeby było dobrze)

Po prostu opera głupieje widząc opacity i tyle...

[gekon]

Nie rozumiem. Zrzut ekranu chociaż

[barat]

A nie próbowałeś ominąć dziedziczenia poprzez dodanie dla big{} opacity na 1 ?
Wtedy ta nowa wartość "zniesie" tą "wyżej".

[gekon]

A próbowałeś? Wszystkie elementy potomne rodzica z ustawioną przezroczystością dziedziczą po nim, NIE DA SIĘ tego nadpisać: http://www.glazar.info/opacity.html

Ten post edytował gekon 21.05.2007, 11:57:18

[barat]

Może po prostu odpuść sobie przezroczystość - używaj po prostu obrazków ?

Bo z tego co właśnie poczytałem to przezroczystość aplikowana jest do całej warstwy, łącznie z tym co się w niej znajduje.
Przed chwilą zobaczyłem, że nawet ignoruje Float czyli jakby "wyjęcie" jej z tego obiegu ...
Strasznie kłopotliwe ...
Zresztą - to tylko dla firefoxa w IE 6.0 nie działa

[Pilsener]

Odpuścić? Nigdy w życiu!

Mam kod:

HTML:

Kod

<div id="top">
   <div id="lewy_baner"></div>
   <div id="prawy_baner"></div>
   <div id="srodek_baner">
   </div>
</div>

Chcę, aby ładnie się rozciągało więc dla lewego i prawego float, dla środka width:auto:

Kod

#top {
height: 50px;
filter: Alpha(Opacity=75); opacity: .75;
background: url(grafika/baner_tlo.jpg);
}

#prawy_baner {
float: right;
width: 269px;
height: 50px;
background: url(grafika/baner_prawy.jpg);
}

#lewy_baner {
float: left;
height: 50px;
width: 133px;
background: url(grafika/baner_lewy.jpg);
}

#srodek_baner {
height: 50px;
width: auto;
background: url(grafika/baner_lewy.jpg) no-repeat center;
}

I mamy coś takiego:


Ale widzimy, że:

1. Centrowanie tła wyświetla się poprawnie tylko w IE
2. W operze pomimo tego, że tekst ładnie się wpasowuje, środkowy div się rozjeżdża! Ładnie to widać, kiedy środkowy div koloruje na niebiesko:



Tekst ładnie się wpasowuje, ale czemu tło wyłazi na boki? Jak zaradzić?
Dla środkowego diva daję marginesy i otrzymuje coś takiego:



Widzimy, że centrowanie zalatwione, ale w operze wciąż coś nie gra. Otóż zauważyłem, że w FF i IE opacity jest wyświetalne jako dwie warstwy: treść i tło (co moim zdaniem jest logiczne i praktyczne). Natomiast w operze zobaczymy tyle warstw, ile mamy zagnieżdżonych elementów! (w tym wypadku raz są dwa, raz trzy - stąd różnica kolorków)

Jak zaradzić?
"Zdjąć" 3-cią wartwę nadając całemu topowi marginesy dodatnie, natomiast lewemu i prawemu ujemne. IE nakarmimy position:relative oraz filtrami. Całość wygląda teraz tak:



A tutaj macie wgląd w cały projekt (jestem amatorem, więc proszę się nie śmiać):
http://www.pilsener.fr.pl/test/naglowek.php

Problem kolejny, to wyświetlanie elementów w operze:

Kod

<div>
<h1>Typowy H1</h1>
<h1 style="display:inline">H1 z display:inline</h1>
<h1 style="float:left">H1 z float</h1>
</div>

i CSS:

Kod

div {
padding: 30px;
width: 500px;
height: 300px;
background: green;
opacity: 0.75;
}

body {
padding: 30px;
background: yellow;
}

h1 {
background: blue;
}

W FF wszystko jak po sznurku, a w operze?

Znowu mamy trzy warstwy, ale tylko dla elementów blokowych bez float! Co to za dziwna interpretacja?

Moja opinia o operze jako przeglądarce przyjaznej dla webmajsterów została mocno nadwątlona