Toon posts:

[css/html] fixed td height + rowspan

Pagina: 1
Acties:

donderdag 6 november 2003 11:44

Acties:

Verwijderd

Topicstarter
In Mozilla/Netcape (laatste versies) werkt het wel, maar in Internet Explorer 6.x wil het niet lukken ...

In onderstaande code staat een tabel.
5 rijen, 2 kolommen.
de rechter kolom is een rowspan.
de linker kolom bestaat dus uit 5 regels.

Nu wil ik in de linkerkolom dat de onderste 4 rijen van een fixed hoogte zijn (15px) en de bovenste rij moet variabel / stretching zijn.
Want als de inhoud van rechterkolom groter/kleiner wordt, worden in IE malle rijen in de linkerkolom opgerekt. Alleen de bovenste rij zou moeten meerekken.

Zoals ikal zei: in Mozilla / Netscape werkt het wel!
Iemand enig idee?

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,p,table,tr,td{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:   11px;
    color:       #000000;
}
table{
    table-layout: fixed;
    border:       1px solid #000000;
}
.menu{
    border-top:        1px solid #000000;
    font-weight:       bold;
    height:            15px;
    max-height:        15px;
    min-height:        15px;
    background-repeat: no-repeat;
}
-->
</style>
</head>

<body>
<p>Netscape + Mozilla compatible</p>
<table width="400" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="125" valign="top" 
           style="background-color: #F5F5F5;">
       <p>nieuws</p>
    </td>
    <td width="275" valign="top" rowspan="5" 
          style="border-left: 1px solid #000000; 
          background-color: #E4E4E4;">
    <p>woord 1</p>
    <p>woord 2</p>
    <p>woord 3</p>
    <p>woord 4</p>
    <p>woord 5</p>
    <p>woord 6</p>
    <p>woord 7</p>
    <p>woord 8</p>
    <p>woord 9</p>
    <p>woord 10  </p></td>
  </tr>
  <tr>
    <td width="125" class="menu">item 1 </td>
  </tr>
  <tr>
    <td width="125" class="menu">item 2 </td>
  </tr>
  <tr>
    <td width="125" class="menu">item 3 </td>
  </tr>
  <tr>
    <td width="125" class="menu">item 4 </td>
  </tr>
</table>
</body>
</html>

donderdag 6 november 2003 12:47

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 17:43

crisp

Devver

Pixelated

Dit soort problemen zijn meestal het beste op te lossen door met geneste tables te werken.
Bij een redelijk eenvoudige layout zou je ook kunnen overwegen helemaal van tables af te stappen.

Intentionally left blank

donderdag 6 november 2003 12:52

Acties:

Verwijderd

dit was mij laatst ook al opgevallen, zonder css werkte het wel altijd goed..
ik had het wel opgelost maar weet zo niet meer hoe...

ik zal het ff proberen op te zoeken

donderdag 6 november 2003 13:14

Acties:

Verwijderd

Topicstarter
Geneste tabellen vind ik geen optie ...

Omdat een geneste tabel op 100% in een cel (met padding en margin op 0!) niet 100% breedt wordt ... Dus dat wordt lelijk als ik DHTML (mouseover) effecten wil toepassen op de onderste 4 rijen.

donderdag 6 november 2003 14:46

Acties:

Verwijderd

ik kom er ook niet uit ;/

ik weet zeker dat het ooit goed heeft gewerkt.. maja ik denk dat je het beste met divjes verder kunt gaan...

donderdag 6 november 2003 15:16

Acties:

Verwijderd

Topicstarter
Dat denk ik ook :) thanks in ieder geval ... mocht ooit iemand de oplossing vinden ...
Pagina: 1
Reageer