overflow in IE6

MisterG · #1 (**permalink**) 31.10.2007, 12:24

moin allesamt,

Ich habe auf meiner Page eine Toolbar, ein Header, den Content und einen Footer. Toolbar, Header und Footer haben eine fixe grösse. Der Content sollte einfach den Platz füllen zwischen Header und Footer.
Funktioniert bis jetzt im FF und IE7. Im IE6 (wie könnte es auch anders sein) klappt es mit dem overflow nicht, d.h. der Content wird so weit vergrössert bis der Inhalt Platz hat.

Hier ist mein Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>PopUp-Alternative</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    #toolbar {
      height: 30px;
      width: 1000px;
      background-color: blue;
    }
    .header {
      background-color: #C0C0C0;
      border: 0px;
      padding: 10px 0 0 0;
      width: 1000px;
      height: 30px;
    }
    .footer {
      width: 1000px;
      height: 50px;
      background-color: #C0C0C0;
      position: absolute;
      bottom: 0px;
      border: 0px;
      z-index: 10;
    }
    .inhalt {
      position: absolute;
      background-color: #00FF00;
      text-align: left;
      width: 1000px;
      overflow-y: scroll;
      bottom: 50px;
      top: 60px;
    }
  </style>
</head>
<body>
  <div id="toolbar">#toolbar</div>
  <div class="header">.Header</div>
  <div class="inhalt"> ANFANG<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>	Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>
Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>Inhalt<br/>ENDE
  </div>
  <div class="footer">.Footer</div>
</body>
</html>

Gibt es da eine Möglichkeit?

Im Vorraus besten Dank.
MisterG

heiko_rs · #2 (**permalink**) 31.10.2007, 14:07

Nicht overflow ist das Problem, sondern

Code:

.inhalt {
      position: absolute;
      background-color: #00FF00;
      text-align: left;
      width: 1000px;
      overflow-y: scroll;
      bottom: 50px;
      top: 60px;
    }

Sowas (d.h. Aufspannen mit "gegenüber" liegenden Offsets) läuft im IE < 7 nicht. Er braucht für sowas ganz schwere Geschütze inkl. Quirksmode, z.B. hier: stu nicholls | CSS PLaY | cross browser fixed header/footer layout

Auf dieser Seite gibt's auch noch mehr Layouts in dieser Art.

MisterG · #3 (**permalink**) 31.10.2007, 14:26

Hallo heiko_rs!

Vielen Dank für die Antwort.
Werde das Beispiel von Stu Nicholls mal genau ansehen und mich über Quirksmode informieren. Bis heute habe ich noch nie mit solch "schwerem Geschütz" gearbeitet. Naja, einmal ist immer das erste Mal.

Falls ich nicht mer weiter komme melde ich mich wider.

Nochmals vielen Dank.

heiko_rs · #4 (**permalink**) 31.10.2007, 14:38

Ich persönlich würde sowas übrigens nicht machen, sondern ein Layout wählen, das auch ohne Quirksmode im IE < 7 läuft - oder für diesen auf die feststehenden Bereiche verzichten und stattdessen eine Lösung wie FAQ Punkt 7 wählen.

MisterG · #5 (**permalink**) 31.10.2007, 15:26

Die Lösung in FAQ 7 passt nicht wirklich zu meinem Design. Der Footer sollte immer sichtbar sein.

Warum würdest du den Quirksmode meiden? Gibt es dafür gute Argumente? Müsste nähmlich jemanden noch von einem Design-wechsel überzeugen

heiko_rs · #6 (**permalink**) 31.10.2007, 15:40

Zitat:

Zitat von MisterG

Warum würdest du den Quirksmode meiden?

IE 6 und 7 rendern dann wie der IE 5.x, d.h. u.a. falsches Boxmodell (wenngleich genau das im konkreten Fall der Schlüssel zum Erfolg ist), und der IE 7 "vergißt" gute Eigenheiten wie min-/max-Dimensionen etc...

Aber wenn Du es schaffst, Deine Seite im IE 5.x korrekt zum Laufen zu bekommen, wird Dir das auch in 6 und 7 Quirks gelingen, also mach's halt, falls Dir die Überzeugungsarbeit mühsamer erscheint

(übrigens beträfe der Designwechsel ja ausschließlich den IE 6).

MisterG · #7 (**permalink**) 05.11.2007, 17:32

Ich habe mich nun doch für die Variante mit Quirksmodus entschieden. Aber eigentlich möchte ich nur im IE6 in den Quirksmodus fallen. So sieht der Anfang von meiner Site aus:

Code:

<!--[if IE 6]>
  <!-- Put IE into quirks mode -->
<![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Funktioniert eigentlich auch, aber mein xhtml Code ist dann nicht mehr valide.
Gibt es da noch eine andere Möglichkeit?

Gruss,
MisterG

IChao · #8 (**permalink**) 06.11.2007, 09:48

Nur IE<7 im Quirksmode:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Alle IE im Quirksmode:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Quelle

MisterG · #9 (**permalink**) 06.11.2007, 13:47

Vielen Dank, Ingo.

Nun habe ich aber das Problem, dass Umlaute(ä,ö,ü) nicht mer richtig angezeigt werden. Muss ich da einen anderen Zeichensatz bei encoding angeben (habe keinen passenden gefunden)?

Alles auf ü ect. umzustellen ist zur Zeit nicht möglich.

MfG,
MisterG

heiko_rs · #10 (**permalink**) 06.11.2007, 14:25

Zitat:

Zitat von MisterG

Muss ich da einen anderen Zeichensatz bei encoding angeben

Am besten den, den Du verwendest

Du wirst doch wohl irgendwo einen angeben (HTTP-Header, meta-Element)?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit overflow hidden im IE7 & IE6	TheFreeman	CSS	9	31.01.2011 11:30
IE6 visible Submenu bei overflow	jahrome	CSS	34	14.10.2010 09:25
Problem mit Layout auf IE6	kraadde	CSS	2	23.11.2007 00:24
Probleme mit dem Border im IE6	bullseye	CSS	9	30.10.2007 16:21
overflow: auto im ie6, möchte scrollbars	EdgarM	CSS	0	23.11.2006 12:29