Forum PHP.pl > [HTML] doctype niszczy układ strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML] doctype niszczy układ strony

!*!

2.08.2010, 10:53:42

Testowo zrobiłem sobie stronę która miała być rozciągnięta na całą szerokość i wysokość, tak, aby elementy w niej były skalowane do rozmiarów okna przeglądarki. Uzyskałem zadowalający efekt:

[HTML] pobierz, plaintext 
<html>
<head>
<meta charset="utf-8" />
<title> xxx </title>
 
</head>
<body>
 
<style>
 
body {overflow : hidden;
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
 width:100%;
}
 
header{
  position:absolute;
  top:0;
width:100%;
 
}
 
#wrapper {
  height:100%;width:100%;
  background:red;
}
 
#left{
overflow:auto;
margin-right:250px;
background:green;
height:100%;
}
 
#right{
position:absolute;
right:0;
background:blue;
width:250px;
height:auto;
}
 
</style>
 
<header>zxczxczxczx</header>
<div id="wrapper" >
  <div id="right">r sdfsdfsdfs</div>
  <div id="left" >
 
zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>
zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>
zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>
zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>zxczxc<br/>
 
 
</div>
 
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Wszystko działa tak jak powinno na każdej (nawet IE7/8) przeglądarce... Jednak po dodaniu doctype dla html5:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
[HTML] pobierz, plaintext

Całość po prostu się sypie... Jak można to rozwiązać?

Mógłbym to zostawić tak jak jest, no ale po 1. ciekawi mnie dlaczego tak się dzieje, 2. poprawna walidacja jest konieczna.

thek

2.08.2010, 11:36:39

Doctype ustawiony wyłącza pewne ustawienia "predefiniowane" przez przeglądarki. Konkretnie chodzi o quirks mode choćby. Poczytaj na wiki choćby -> http://pl.wikipedia.org/wiki/Quirks_mode

!*!

2.08.2010, 13:31:28

Tak wiem na jakiej zasadzie działa doctype i pliki DTD. Jednak nie wiem dlaczego powyższy przykład nie działa po dodaniu jakiegokolwiek doctype. Gdzie jest błąd? Zauważyłem że overflow, nie działa na wysokości 100%.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.