[TYPO3-german] [OT] CSS - Podcast Thomas Biller

Thu Feb 19 13:17:59 CET 2009

Hallo zusammen,

Thomas erklärt in seinem CSS Podcast auf typo3.org, wie man ein Layout 
erstellt, bei dem die Umrechnung von em in px sehr genial und einfach 
funktioniert.

Zur Erinnerung hier nochmal der Link:
http://castor.t3o.punkt.de/files/podkast_7mf_css.m4v

Heute ist mir jedoch etwas aufgefallen, was ich mir nicht erklären kann, 
und ich hoffe, dass von Euch jemand den entscheidenden Tipp für mich hat.

Ich habe ein 3 Spaltiges Layout erstellt. Die Spalten haben alle
float: left; und sind natürlich div´s.

Ich habe dabei folgende Breiten in em verwendet:

Wrapper: 98.0em;
Links & Rechts: 17.6em;
Mitte: 62.8em;

Leider bricht die letzte Spalte im IE7 um.
Damit Ihr das mal nachvollziehen könnt, hier der Code:

---- HTML ----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>CSS - PROBLEM</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_margins">
   <div id="header">
     <div class="sideCol">Links</div>
     <div class="centerCol">Mitte</div>
     <div class="sideCol">Rechts</div>
   </div>
</div>
</body>
</html>
---- ENDE ----

--- CSS ---
/* CSS Document */
   * {
     font-size: 1em;   /* dont change */
     margin:0;
     padding: 0;
     font-weight: normal;
   }
   html {
     font-size: 62.5%; /* dont change */	
   }

   body{
     color: #093057;
     background: #fff;
     text-align: left; /* LTR */
     margin:0;
     padding:0;
     font-size: 1.0em; /* global font-size tag*/
     font-family:  Arial, Helvetica, sans-serif;
   }

   #page_margins {
     width: 98.0em;
     padding:1.0em 0.0em;
     margin: 0.0em auto;
   }

   #header {
     background: #093057;
     color: #fff;
     margin:0.0em;
     padding:0.0em;
     height: 6em;
     width: 98.0em;
   }

   .sideCol {
     margin:0;
     padding:0;
     float: left;
     width: 17.6em;
     background-color: #eaeaea;
     position:relative;
     height: 6em;
   }

   .centerCol {
     float: left;
     width: 62.8em;
     margin:0;
     padding:0;
     background:navy;
     position:relative;
     height: 6em;
   }
--- ENDE ---