Doctype-Problem im Firefox bzw. CSS Problem im IE

Frostbeule2k · 1. Oktober 2009

Hi *,

da ich nach langem suchen und rumprobieren nicht weiterkomme wende ich mich doch mal wieder an euch

Folgendes Problem:
Der Inhalt meines Bodys fängt ganz oben im Browser an. Ein DIV Container soll dauerhaft sichtbar sein und immer 100px vom oberen Rand des Browsers entfernt sein, soll also nicht mit gescrollt werden. So nun zum eigentlichen Problem. Der IE packt das DIV ans Ende des Bodys und nicht drüber, der Firefox packt das Fenster richtig an die von mir angegebene stelle.
Stylesheetcode des DIV´s:

HTML:

style="position:fixed; left:80px; top:150px;"

Um im IE das DIV auch an die richtige stelle zu bekommen habe ich herausgefunden, wenn man den Doctype am Anfang dse Dokumentes angibt funktionert es im IE, allerdings hat es dann im Firefox den Body Inhalt um ca. 1 Zeile nach unten verschoben und somit fängt mein Body nicht mehr ganz oben an, was ich aber brauche.
Doctypecode:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Nehme ich die Doctype Zeile wieder raus ist der FF wieder ok und beim IE ist das DIV wieder am unteren Ende... habe schon alles mögliche ausprobiert, verschiedene Doytypes und auch verschiedene Positionierungsangaben, leider ohne Erfolg. Wisst ihr weiter?! Ich verzweifle noch...
Hier noch der Komplette Code der Testseite...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>position:fixed: Positionsart: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets</title>

<style type="text/css"><!--
#div1 {
padding:5px;
width:300px;
height:80px;
background-color:#efefef;
border:1px solid #000000;
}
// --></style>
</head>
<body style="padding:0px; padding-top:1px; margin-top:0px; ">
<h1 style="color:black">Hier ist die oberste Zeile!</h1><br>
<h1 id="h1">position:fixed: Positionsart</h1>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<div id="div1" style="position:fixed; left:80px; top:150px;">
Dieser <em>&lt;div&gt;</em>-Container sollte von links um 80 Pixel und um 150 Pixel von
oben verschoben sein und nicht mitgescrollt werden.</div>
</body>
</html>

Beispiel wurde urspünglich bei Selfhtml raus gesucht...

Ein Workaround wäre via PHP eine Browserweiche einzubauen... aber das ist nicht ganz sinn der Sache. Das muss doch auch so gehen, oder!???

Gruß Frostbeule2k

DaFreax · 1. Oktober 2009

Versuch das mal mit Margin-top und Margin-Left und schau mal obs besser ist

HellbillyDeluxe · 1. Oktober 2009

Gib den Doctype an und benutze 2 verschiedene Stylesheets. Eins für den IE, das andere für den Firefox.
Dafür brauchst du auch kein PHP

Frostbeule2k · 1. Oktober 2009

@ DaFreax: das habe ich schon alles probiert. Hat leider bei keinem funktioniert.

@ HellbillyDeluxe: ich kann das Problem via Stylesheetdaten allerdings nicht ändern, ich müsste den Doctype mitgeben wenn es ein IE ist und ihn weglassen wenn es Firefox ist. Das geht meines Wissens nach mit Stylesheet nicht, oder!?

HellbillyDeluxe · 1. Oktober 2009

@ Frostbeule2k:

Den Doctype kannst du zwar nicht per CSS ändern, aber wenn das Problem mit Doctype beim Firefox nur darin besteht, dass der Body-Inhalt zu weit nach unten verschoben ist, dann lässt sich das ja über CSS relativ einfach fixen.

Rossibaer · 1. Oktober 2009

Mal eine andere Idee, wie ich sehe hast du das CSS mit in der Datei. Lagere mal das CSS Zeugs aus und referenziere in deiner HTML Datei die neue CSS Datei. Hintergrund: wenn der DOC Type ins Spiel kommt, gibt es Unterschiede in der Interpretation. In deinem CSS Code maskierst du den Code mit den Kommentarzeichen "" Was ja an sich richtig ist, aber unter Umständen den IE aus dem Tritt bringt, wenn der DOC Type definiert bzw. nicht definiert ist. Ist aber nur eine Vermutung, die es mal zu verifizieren gilt...

z.B. im Header:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
Dein Text
</body>
</html>

Suche

Doctype-Problem im Firefox bzw. CSS Problem im IE

Frostbeule2k

Ensign

DaFreax

Ensign

HellbillyDeluxe

Gast

Frostbeule2k

Ensign

HellbillyDeluxe

Gast

Rossibaer

Lieutenant

Ähnliche Themen