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!

[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:
(IMG:http://www.pilsener.fr.pl/galeria/inne/opera1.jpg)

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:

(IMG:http://www.pilsener.fr.pl/galeria/inne/opera3.jpg)

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

(IMG:http://www.pilsener.fr.pl/galeria/inne/opera2.jpg)

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:

(IMG:http://www.pilsener.fr.pl/galeria/inne/opera4.jpg)

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;
}

(IMG:http://www.pilsener.fr.pl/galeria/inne/opera5.jpg)

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 (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)