✔ "fixed"-DIV in IE 8 nicht möglich

Hektik

Hektik

Erfahrenes Mitglied
Hallo!

Ich möchte einen DIV über das komplette Browserfenster legen. Dieser soll dann halb-durchsichtig sein und so den kompletten Rest der Webseite "bedecken", wozu ich eine durchsichtige PNG als Background des DIV definiert habe.

Das klappt hervorragend in Opera und Firefox, allerdings nicht im IE8. Dort wird der DIV nicht über die anderen Seiteninhalte gelegt, sondern an der Position eingefügt, wo ich ihn im Quelltext einbette. Das Design zerschiebt er mir dann leider. :(
Kann mir jemand aushelfen und zeigen, warum das im IE nicht funktioniert?

Mein Code:

HTML: 
<div id="1" style="width:100%; height:100%; position:fixed; top:0px; left:0px; background-image: url(design/grau-durchsichtig.png);">
	<center>
		<div style="position:relative; top:200px; width:300px; background-color:green;">
			Test-Text
		</div>
	</center>
</div>


Schonmal vielen Dank für das lesen meines Posts und über hilfreiche Antworten würde ich mich sehr freuen :)
 
Zuletzt bearbeitet:
Moin,

eines vorweg: Ein ID-Bezeichner darf nicht mit einer Ziffer beginnen - siehe ID, IDREF oder Name.

Zu deinem Problem: Scheinbar übergibst du das HTML-Dokument den Browsern nicht im standardkonformen Modus, denn im Darstellungsmodi "Quirks Mode" verhält sich der aktuelle IE wie der IE6, der position:fixed nicht zu interpretieren weiß.

In diesem Dokument (HTML-Variante Strict = Almost Standards Mode) ist die fixierte Positionierung des DIV-Blocks im IE (7 + 8) sehr wohl möglich:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-08-12">

<title>tutorials.de | demo_Hektik</title>

</head>
<body>

<p>foobar</p>
<p>foobar</p>
<p>foobar</p>

<div style="width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:silver;">
        <center>
                <div style="position:relative; top:200px; width:300px; background-color:green;">
                        Test-Text
                </div>
        </center>
</div>

</body>
</html>


mfg Maik
 
Ah, danke Maik :)

Hatte

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

statt

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
War das wirklich diese Doctype-Deklaration?

Ich frag nur, weil sie dem Darstellungsmodus "CSS1Compat" entspricht, und ich daher mit ihr auch keine Probleme im IE8 feststellen kann.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück