CSS Probleme Class / ID in IE

html.de-Forum HTML, XHTML & CSS
1

Hallo Zusammen

Ich habe ein merkwürdiges Verhalten festgestellt, und weis nicht warum das so ist.

Meine Page tut folgendes (bzw. sollte folgendes tun =):

Wenn ich auf einen bestimmten link klicke, öffnet sich in der Browsermitte ein Div, welches per Z-Index vom Rest abgehoben wird. Dann lege ich hinter dieses Div ein Hintergrund, mit Opacity auf die ganze Seite. Somit wird der Rest der Seite „deaktiviert“.

Das tue ich folgendermassen:

var a = document.createElement('div');
a.setAttribute('class', 'jsBg');
document.body.insertBefore(a,document.body.firstChild);

Das CSS der Klasse ‚jsBg‘ sieht folgendermassen aus:

.jsBg
{
    background-color: #000000;
    filter:Alpha(opacity=40);
    -moz-opacity:0.4;
    opacity:0.4;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
}

in Firefox funktioniert das problemlos. Nur im IE wird der Hintergrund nicht so angezeigt wie er sollte.

Ändere ich aber die Eigenschaften folgendermassen.

a.setAttribute('id', 'jsBg');

und css:

#jsBg
{
   ...
}

dann funktioniert das überall problemlos.

Meine Frage nun: Warum funktioniert das mit der Klassenzuweisung nicht, aber mit der ID schon??

Ich dachte immer der einzige unterschied besteht darin, das die ID nur einmal vorkommen darf, und die Klasse mehrmals.

Danke für die Hilfe.
mfg
MasterChief

2

Warum nutzt du nicht einfach eine Lightbox die dir genau diese Funktion bereits bietet? Sowas muss man sich doch nicht selbst „programmieren“.

3

Diese Antwort ist nicht sehr hilfreich.

Es geht mir nicht darum, wie es funktioniert, oder ob ich es selber machen möchte.
Sondern es ist reine Wissensfrage, da es mich intressiert, warum das auf die eine Weise funktioniert und auf die andere Weise nicht.

4

Setze

a.setAttribute('className', 'jsBg');