HTML/CSS: DIV unten abschneiden bei zu kleinem Fenster

Pumbaa80

Hallo!
Ich habe mir gerade eine nette kleine Seite gebastelt, die mit der Erweiterung about:NotBlank angezeigt wird.
So sieht sie aus:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><title></title>
<div style="text-align: center; display: table; height: 100%; width:100%; overflow: hidden;">
	<div style="display: table-cell; vertical-align: middle; overflow: hidden;">
     <div style="overflow:hidden;">
      <img alt="Mozilla Firefox" src="data:image/jpeg;base64,
       [...]
       ">
   	</div>
	</div>
</div>
</html>

Alles anzeigen

"[...]" wird dabei durch ein Base64-codiertes Bild ersetzt. Dieses wird dann sowohl vertikal als auch horizontal zentriert angezeigt. :klasse:

Das innere DIV mit overflow:hidden bewirkt, dass kein horizontaler Scrollbalken angezeigt wird, wenn das Fenster schmaler als das Bild ist. Es erscheint aber ein vertikaler Scrollbalken. Die Grafik wird also rechts abgeschnitten, aber nicht unten.
[Blockierte Grafik: http://img80.imageshack.us/img80/7164/09282006022246rd0.th.png]
Das ist doof. Weiß jemand, wie ich es hinbekomme, dass auch unten abgeschnitten wird?

bugcatcher

KEIN <BODY>?!?!? FREFEL! Also ich würd das mit dem Overflow in den body tackern.

Pumbaa80

:klasse: Bingo! Danke!
groß
klein

Ich benutze eigentlich generell keinen BODY, wenn kein HEAD vorhanden ist. Diesmal ist es aber sehr vorteilhaft.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><title></title>
<body style="overflow: hidden;">
   <div style="text-align: center; display: table; height: 100%; width:100%;">
      <div style="display: table-cell; vertical-align: middle;">
         <img alt="Mozilla Firefox" src="data:image/jpeg;base64,
          [...]
          ">
      </div>
   </div>
</body>
</html>

Alles anzeigen

Aber ich verstehe ehrlich gesagt nicht, wieso das funktioniert und die andere Variante nicht.
Seltsam ist außerdem, dass die vertikale Zentrierung nicht funktioniert, wenn ich die erste Zeile durch diese ersetze:

Code

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

Normalerweise sollte das doch überhaupt nichts ändern? :-??

bugcatcher

OOOOOh doch. Wenn du nur lokal für deinen browser was baust, lasst das zeug weg. macht einiges einfacher. sobald man die dtd dazu packt, erkennt firefox den richtigen modus und wird sehr pingelig, bzw. die default-werte der einzelnen tags sind dann ganz anders. z.B. hat der body, bzw. der html-bereich selbst dann erstmal keine 100%-höhen-ausdehnung mehr, wie das sonst immer der fall ist. und wenn der keine 100%-höhen ausdehnung hat, dann kann der rest sich auch nicht mit einer 100%-angabe auf die gesamthöhe drücken. das liegt vor allem daran, dass das diese %-werte ja relativ zum nest-element gewertet werden. und wenn der body schon keine 100% höhe hat, kann er inhalt es auch nicht bekommen. logisch eigendlich. muss man aber erst drauf kommen.