I de slemme gamle HTML 3.2 dage, da vi var tvunget til at bruge tabeller til layout, var det et godt råd at sætte sig med et stykke kvadreret papir og tegne tabellerne op før man gav sig i kast med at konstruere dem.

CSS tabelegenskaberne omfatter ikke nogen egenskaber, der kan sammenlignes med colspan og rowspan egenskaberne. Til gengæld er det noget lettere at indlejre tabeller i tabelceller.

Min skitse til hvad jeg vil opnå ser du herover. De røde streger angiver en ny div med egenskaben display:table. Den omfatter noget indhold, in casu den logiske sti, artiklens overskrift og artiklens manchet, samt #nav-elementet, der i forvejen har display-egenskaben table-cell. Bemærk at det end ikke er nødvendigt at oprette et nyt table-cell element til de tre tekstelementer. Browseren opretter af sig selv de anonyme tabelelementer, der skal til for at tegne den røde tabel.

HTML-koden

I forhold til eksempel 6 er #indhold-elementet og #sidebar-elementet nu omsluttet af et #outer-element.

  <div id="side">
    <div id="banner">
    [ Sidehoved indhold ]
    </div>
      <div id="outer">
        <div id="indhold">
          <div id="artikel">
          [ Artikel ]
          </div><!-- /artikel -->
          <div id="sidebar">
          [ Sidebar indhold ]
          </div><!-- /sidebar -->
        </div><!-- /outer -->
        <div id="nav">
        [ Navigationsspaltens indhold ]
        </div<>
        <!-- /nav -->
    </div><!-- /indhold -->
  </div><!-- /side -->;
 

Og dette ene nye element skal blot have display-egenskaben table-cell. Så er den ged barberet.

#indhold {
  display: table;
  border-collapse: collapse; }
#nav {
  display: table-cell;
  width: 200px;
  background-color: #939d92;
  vertical-align:top;}
#sidebar {
  display: table-cell;
  vertical-align:top;
  width:220px;
  border-left:2px solid #505c5a;
  background-color: #fff;
  padding:5px 0 10px 0;
  }
#artikel{
  display: table-cell;
  padding-right: 20px;
  vertical-align:top;}
#outer {
  display:table;
  border-collapse:collapse;  }

IE7 Stylesheet'et

Det kan godt lade sig gøre at lave et stylesheet til IE6/7 der bygger på float-mekanismen. Det har jeg ikke haft lyst til at sysle med, så jeg nøjes med gribe til at bruge position:absolute på #nav-spalten og sjusse mig til top-positionen.

<!--[if lt IE 8]>
<style type="text/css">
#indhold {
  position: relative;
  overflow:hidden; 
  width:100%; /* Aht. IE6 */ }
#nav {float:left;}
#nav ul.menu li {display:inline;}
#artikel {margin-left:420px;}
#sidebar {float:left;}
#sidefod {clear:both;}
#nav, #artikel, #sidebar {
padding-bottom:1000em;
margin-bottom:-1000em;}
</style>
<![endif]--> 

Oprettet maj 2009

Test i forskellige IE-versioner

Alle websidekonstruktører har et problem med at teste i andre versioner af Internet Explorer end den de har installeret på deres PC.

Tredosoft's Multiple IE's kan ikke bruges på en Windows Vista computer.

Microsofts Virtual PC kan ikke bruges på alle versioner af Windows Vista.

Ikke alle har to eller flere computere med forskellige OS'er og IE-versioner. Og personligt er jeg lidt træt af at skifte computer måske mange gange i dagens løb.

Jeg har nu fundet en ny udvej, programmet IETester, der er en browser, der viser en webside udseende i hhv. IE5.5, IE6, IE7 og IE8 – endda i forskellige faneblade så direkte sammenligning er mulig.

---