[css] 'echte' hoogte div element - Softwareontwikkeling

donderdag 1 mei 2003 13:37

Acties:

Topicstarter

Onderstaande code is een testje voor het probleem wat ik probeer te omschrijven.

code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>test</title>
    <meta http-equiv="Content-type" content="text/html; charset='UTF-8'" />
    <style type="text/css">
      DIV#container {
        position: relative;
        border          : 1px solid #000000;
        width           : 500px;
        height          : 30px;
      }
      .child {
        float           : left;
        border-right    : 1px solid #000000;
        padding-top     : 5px;
        padding-bottom  : 5px;
        width           : 100px;
        height          : 100%;
        background-color: #CCCCCC;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1" class="child"></div>
      <div id="child2" class="child"></div>
      <div id="child3" class="child"></div>
    </div>
  </body>
</html>

Met de bovenstaande code ( valid XHTML 1.0 Transitional & valid CSS ) krijg ik bij niet-IE browsers niet het gewenste resultaat. De 'child' divjes zijn namelijk langer/hoger dan de parent: 'container'.

Ik heb gestest met deze browsers:
IE 5.00: goed
IE 6.0: goed
Netscape 6.2: child element valt over de border van de container ( 1px te hoog dus )
Netscape 7.0: child element valt over de border van de container ( 1px te hoog dus )
Mozilla 1.3: child element is evenveel pixels te hoog als het aantal pixels wat ik als padding opgeef
Opera 7.3 child element is evenveel pixels te hoog als het aantal pixels wat ik als padding opgeef

Wat ik dus concludeer is dat de 'echte' hoogte van een child element de hoogte is van zijn parent element plus de padding.

Dat Netscape de border alleen meepakt heb ik geen verklaring voor eigenlijk.

Mijn vraag is welke browser nu het juiste weergeeft( ik zou zeggen IE ) gegeven de code of dat ik iets anders moet proberen om dergelijke constructies te maken ( Je kunt het vergelijken met een tabel met 1 rij en 3 kolommen )

Je kunt het vergelijken met een tabel met 1 rij en 3 kolommen alleen dan met CSS.

Je kan het laten, je kan het doen of je kan het laten doen

donderdag 1 mei 2003 13:48

Acties: