[CSS]Opacity in IE werkt in ene div wel, in andere niet?

[Eusebius]

Een Joomla template die ik aan het veranderen ben, heeft ingebouwde transparantie. Het werkt an sich wel, waar de hoeken worden opgebouwd. Maar het gedeelte waar de tekst komt, is de opacity opeens 0 ... Wat doe ik toch fout?

r9 en 10 zorgen ervoor dat de achtergrond rond de hoeken netjes "verloopt" zoals op de screenshot te zien is. Maar op 37,38 werkt het opeens niet meer

Edit: voor de oplossing zie 3e post

Cascading Stylesheet:

/* the corners etc */ 
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.yb0,.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb8, .xb9, .xb10 {display:block; overflow:hidden; font-size:1px;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb7, .xb9 {height:1px;}
.xb3, .xb4, .xb5, .xb6, .xb7, .xb8, .xb9, .xb10 
{
/* LIGHT YELLOW  */
  background:rgb(255,255,153); 
  filter: alpha(opacity=75);
  opacity: .75;
/* RED CORNER*/
border-left:1px solid rgb(227,43,0); 
border-right:1px solid rgb(227,43,0);
}

.yb0 {height: 4px; margin:0 11px; background:rgb(227,43,0);}
.xb1 {margin:0 11px; background:rgb(227,43,0);}
.xb2 {margin:0 8px; background:rgb(227,43,0);}
.xb3 {margin:0 7px; border-width:0 4px;}
.xb4 {margin:0 5px; border-width:0 4px;}
.xb5 {margin:0 4px; border-width:0 3px;}
.xb6 {margin:0 3px; border-width:0 3px;}
.xb7 {margin:0 3px; border-width:0 2px;}
.xb8 {margin:0 2px; border-width:0 2px;}
.xb9 {margin:0 1px; border-width:0 3px;}
.xb10 {height:2px; margin:0 1px; border-width:0 2px;}

/* main content */
.xboxcontent 
{
    display:block;  
    background:rgb(255,255,153); 
    border-left: 0px; 
    border-right: 0px;
    margin: 0 0 0 0;
    padding:1px 5px;
    filter: Alpha(Opacity=75);
  opacity: .75;
}

.xboxcontent_inner
{
  width: 100%;
    background:transparent;

En een screenshotje wat ik bedoel:

[ Voor 5% gewijzigd door Eusebius op 06-03-2006 11:48 ]

[BasieP]

en staat in de html de xboxcontent_inner ook binnen de xboxcontent?

btw, strip eens al die nutteloze css meuk, en laat alleen relevante info staan svp

btw is dit vrij nutteloos:

Cascading Stylesheet:

background:transparent;

das namelijk default

verder de vraag, doet FF/Safari het wel goed?

[ Voor 34% gewijzigd door BasieP op 06-03-2006 11:40 ]

[Eusebius]

FF doet het ok, Safari heb ik niet Zoals gezegd, is de template niet van mij. Of er wel/niet overbodige meuk instaat, doet er nu verder niet zoveel toe.
De xboxcontent _inner staat in de xboxcontent. Dat werkt ok!

[edit]
Wat lezen we nou op internet?

Explorer Windows requires:

filter: alpha(opacity=50);

Note that an element must have layout for a filter to work.

You must specify either a width or a height for any element you want to be opaque, (except for form fields, because they have a default width set). This is a consequence of the way Microsoft defines filters.

Bron: http://www.quirksmode.org/css/opacity.html

Ik heb aan de .xboxcontent simpelweg height: 100%; toegevoegd en nu doet ie het ook in IE

[ Voor 57% gewijzigd door Eusebius op 06-03-2006 11:44 ]

[JHS]

Cascading Stylesheet:

.yb0,.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb8, .xb9, .xb10 { }

Dit is waarschijnlijk beter op te lossen door de betreffende dingen een class="xb" mee te geven, en dáárnaast een id="xb[.]", of class="xb xb[.]", althans zo klinkt het .

Heeft niet zoveel te maken met je vraag overigens .

[ Voor 11% gewijzigd door JHS op 06-03-2006 11:44 ]

[Eusebius]

Voor de oplossing zie de 3e post.

In ieder geval bedankt. Ik kom qua CSS net om de hoek kijken en daarom strip 'n rip ik andermans werk om het een beetje te leren.

De oplossing om zo ronde hoeken te maken, vond ik wel leuk. Heb je geen plaatjes nodig. Nu alleen nog even uitzoeken hoe ik de hoeken wat dikker kan maken zonder dat het een pixel-trap wordt.

[RM-rf]

ik heb het idee dat

Cascading Stylesheet:

.xtop, .xbottom {
  display:block; background:transparent; font-size:1px;  
  filter: alpha(opacity=75); 
  opacity: .75; 
}

al genoeg werkt (waarschijnlijk hebben de top en bodem-blokjes de class 'xtop' resp. 'xbottom')

edit: aah, dat was het dus niet, oplossing is al gegeven: zie [rml]Eusebius in "[ CSS]Opacity in IE werkt in ene div wel,..."[/rml]

[ Voor 21% gewijzigd door RM-rf op 06-03-2006 11:50 ]