[html] overflow werkt anders met strict doctype? - Softwareontwikkeling

maandag 22 december 2003 16:59

Acties:

Aus der Reihe...

Topicstarter

Ik probeer een simpele pagina te maken voorzien van een footer onderaan van 40px hoog. Deze code heb ik na wat zoeken op GoT inmiddels geschreven:

HTML:

<html>
  <head>
    <style type="text/css">
<!--
body {
  margin: 0 0 40px 0;
}

div#content {
  background-color: lime;
  height: 100%;
  overflow: auto;
}

div#footer {
  background-color: yellow;
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
-->
    </style>
  </head>
  <body>
     <div id="content">content<br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br>
     <br>nog meer</div>
    <div id="footer">footer</div>
  </body>
</html>

Dit werkt prima. Als ik het browservenster (IE 6) verklein, zodat de inhoud van de content-div niet meer past, verschijnt er netjes een scrollbalk.
Echter, zodra ik de volgende DOCTYPE definitie toevoeg, ziet het er totaal anders uit:

HTML:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Wanneer ik het browservenster nu verklein, komt de scrollbalk niet meer aan de zijkant van de content-div, maar naast het totale window. Dit is natuurlijk niet de bedoeling. Waarschijnlijk komt dit doordat IE nu in een andere modus (quirk?) wordt gedwongen.
Wat doe ik fout waardoor het met de strict-definitie niet meer goed werkt?

maandag 22 december 2003 17:38

Acties:

Verwijderd

Is dit niet mooier? Is een gestripte versie van iets dat crisp een keer gemaakt heeft.

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-bottom: 80px;
  -moz-box-sizing: padding-box;
}



#middlecontainer {
  position: relative;
  height: 100%;
}


#middle {
  position: relative;
  height: 100%;
  background-color: yellow;
  overflow: auto;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

</style>
<body>
<div id="container">
  <div id="middlecontainer">
    <div id="middle">middle<br /><br />
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
    </div>
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>

[ Voor 45% gewijzigd door Verwijderd op 22-12-2003 17:43 ]

maandag 22 december 2003 17:55

Acties:

Ralluph

Aus der Reihe...

Topicstarter

Nokia schreef op 22 december 2003 iets over een in zijn ogen mooiere oplossing:

Bedankt, deze had ik nog niet op waarde geschat bij een vluchtige evaluatie van de search results. Op het eerste oog lijkt dat inderdaad prachtig te werken. Ik zal het morgen eens aandachtiger bestuderen. Het geeft mij altijd een vreemd gevoel dat zoiets simpels blijkbaar zoveel code nodig heeft.

offtopic:
Maar nu eerst naar huis

maandag 22 december 2003 19:35

Acties:

Verwijderd

*anne vindt dat je in HTML geen XML prolog moet gebruiken, eigenlijk vindt hij dat je dat zoiezo beter kunt vermijden vanwege een aantal problemen: http://www.plasticlab.nl/index.php?p=68&more=1&c=1*

maandag 22 december 2003 19:40

Acties:

Verwijderd

Verwijderd schreef op 22 december 2003 @ 19:35:
*anne vindt dat je in HTML geen XML prolog moet gebruiken, eigenlijk vindt hij dat je dat zoiezo beter kunt vermijden vanwege een aantal problemen: http://www.plasticlab.nl/index.php?p=68&more=1&c=1*

En daar ben ik het helemaal mee eens. Strict + XML declaration gaan niet samen. Doe mij dan maar strict mode.

maandag 22 december 2003 19:41

Acties:

crisp

Devver

Pixelated

de link uit de DTD slopen wil ook nog wel eens helpen

Intentionally left blank

maandag 22 december 2003 19:42

Acties:

Verwijderd

Alsof dat een lekkere oplossing is...

maandag 22 december 2003 19:51

Acties:

Verwijderd

Met quirks mode is niks mis IMO, je moet het alleen wel op de goede manier doen:

code:

1 2	<!-- --> doctype hier

Werkt perfect voor IE ;-) en geeft geen problemen in andere browsers.

dinsdag 23 december 2003 09:17

Acties:

Ralluph

Aus der Reihe...

Topicstarter

Juist, met een leeg comment voor mijn DTD kan ik dus quirks mode afdwingen. Dat lijkt prima te werken. Die xml-prolog lijkt mij geen bij nadere beschouwing geen goede zaak, omdat HTML 4.01 geen xml-syntax volgt.
Ik vrees dat ik mijn project dus maar in quirks mode moet gaan renderen.
Of weet iemand hoe het mogelijk is om met het W3C boxmodel (standards mode) toch ervoor te zorgen dat ik mijn footer onderaan het scherm kan dwingen?

dinsdag 23 december 2003 12:29

Acties:

Verwijderd

Het gaat erom dat betere browsers in standard mode zitten ;-) en daar hoort IE niet bij.