[html] IE error @ tabellen

Pagina: 1
Acties:
  • 109 views sinds 30-01-2008
  • Reageer

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

Topicstarter
Nu heb ik dus volgens mij een echte bug ontdekt in IE - in elk geval versies 5.0 t/m 6.0.
De volgende tabel wil ik maken (is een bekende puzzel):
code:
1
2
3
4
5
6
7
8
9
10
11
12
+----------+------+--------+
|       |   |     |
|       |   |     |
|       |   |     |
|       +----+-+      |
|       |    +-+--------+
+--------+-+    |       |
|     +-+----+      |
|     | |       |
|     | |       |
|     | |       |
+--------+------+----------+

De vakjes zijn allemaal vierkanten.
Geformuleerd ziet het er zo uit:
(6, 4, 5) (3, 1) (6) (5, 1) (4)
oftwel als je de vierkanten van links naar rechts en boven naar onder nummert zijn ze 6x6, 4x4, 5x5 etc.
In html heb ik het voor het gemak maal 40 gedaan, en mbv colspans en rowspans het volgende opgezet (row en colspan = 1 voor de duidelijkheid erbij gezet):
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
<html>
<head>
<title>Explorer error?</title>
</head>
<body>
<table border=1 cellspacing=0 cellpadding=0>
  <tr>
    <td colspan=2 rowspan=3 height=240 width=240 align="center">1</td>
    <td colspan=2 rowspan=1 height=160 width=160 align="center">2</td>
    <td colspan=1 rowspan=2 height=200 width=200 align="center">3</td>
  </tr>
  <tr>
    <td colspan=1 rowspan=3 height=120 width=120 align="center">4</td>
    <td colspan=1 rowspan=1 height=40 width=40 align="center">5</td>
  </tr>
  <tr>
    <td colspan=2 rowspan=3 height=240 width=240 align="center">6</td>
  </tr>
  <tr>
    <td colspan=1 rowspan=2 height=200 width=200 align="center">7</td>
    <td colspan=1 rowspan=1 height=40 width=40 align="center">8</td>
  </tr>
  <tr>
    <td colspan=2 rowspan=1 height=160 width=160 align="center">9</td>
  </tr>
</table>
</body>
</html>

En wat schetst mijn verbazing: IE SNAPT HET NIET!!! Zoals hier te bezien valt!
Leuk om te weten dat NS, Opera en Mozilla de tabel wel goed laten zien, waar IE voor vierkant 4 voor het gemak maar even vergeet dat er een rowspan=3 staat in plaats van 2.
Nu moet ik dus zelfs truuken gaan uithalen om er iets in IE goed uit te laten zien :o |:(

Intentionally left blank


  • Dennis
  • Registratie: Februari 2001
  • Laatst online: 20:37
Hmmmz, idd.
Vaag...

Verwijderd

IE 5.1 Mac doet het ook goed, niet dat je er iets aan hebt.. maarrre dacht het toch maar ff te posten voor de volledigheid.

  • Shagura
  • Registratie: Augustus 2001
  • Laatst online: 16:57
in IE 6 doet ie het wel.

  • Shagura
  • Registratie: Augustus 2001
  • Laatst online: 16:57
En ik vind hem echt vreemd... Ik snap hem niet echt :? |:(

  • Dennis
  • Registratie: Februari 2001
  • Laatst online: 20:37
Op dinsdag 12 februari 2002 19:59 schreef Shagura het volgende:
En ik vind hem echt vreemd... Ik snap hem niet echt :? |:(
Kijk je wel goed dan :?

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

Topicstarter
Screenshotjes (50% verkleint, maar duidelijk genoeg dacht ik).

Mozilla:
Afbeeldingslocatie: http://www.crisp.demon.nl/pictures/moz.gif

IE6:
Afbeeldingslocatie: http://www.crisp.demon.nl/pictures/ie6.gif

[edit]
gridje erachter maakt het helemaal duidelijk...
[.edit]

Intentionally left blank


  • Shagura
  • Registratie: Augustus 2001
  • Laatst online: 16:57
ok sorry mijn fout..... Nu snap ik hem ineens wel :)

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

Topicstarter
Trouwens wel een leuke uitdaging om deze tabel in IE wel goed te krijgen. Het is me inmiddels gelukt, but it ain't pretty >:)
En nee, ik verklap de oplossing nog niet... ;)

Intentionally left blank


  • Dennis
  • Registratie: Februari 2001
  • Laatst online: 20:37
Is de oplossing om gewoon meer (soort van) dummy rijen te maken en dan met borders in CSS werken :?

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

Topicstarter
Op woensdag 13 februari 2002 10:32 schreef ddc het volgende:
Is de oplossing om gewoon meer (soort van) dummy rijen te maken en dan met borders in CSS werken :?
Alleen met dummy rijen ben je er niet; het probleem wordt dan in IE alleen maar erger....
De borders is een probleem an sich. Mozilla rendert de borders binnen de cel, waar IE de cellen 'oprekt'. Tevens voegt IE de borders van aanliggende cellen samen: als je bijvoorbeeld voor de cellen een border van 1px instelt dan zal in IE de border tussen de cellen ook maar 1 pixel zijn, terwijl het in mozilla 2 pixels zijn (er grensen immers 2 cellen aan elkaar met elk een eigen border, dus dit is correct).
Verder heeft IE de vervelende eigenschap dat als je bijvoorbeeld alleen een top en left border instelt, dat er dan 1 pixel rechtsboven en linksonder niet gevuld wordt (volgens IE hoort die pixel bij de right of bottom border).

Intentionally left blank


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

Topicstarter
En inmiddels heb ik een tabel weten te maken die ook in Mozilla niet goed gerenderd wordt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table border=1 cellspacing=0 cellpadding=0>
  <tr>
    <td colspan=1 rowspan=3 height=150 width=150>[img]"spacer.gif"[/img]</td>
    <td colspan=3 rowspan=1 height=80 width=80>[img]"spacer.gif"[/img]</td>
    <td colspan=1 rowspan=2 height=90 width=90>[img]"spacer.gif"[/img]</td>
  </tr>
  <tr>
    <td colspan=2 rowspan=2 height=70 width=70>[img]"spacer.gif"[/img]</td>
    <td colspan=1 rowspan=1 height=10 width=10>[img]"spacer.gif"[/img]</td>
  </tr>
  <tr>
    <td colspan=2 rowspan=2 height=100 width=100>[img]"spacer.gif"[/img]</td>
  </tr>
  <tr>
    <td colspan=2 rowspan=2 height=180 width=180>[img]"spacer.gif"[/img]</td>
    <td colspan=1 rowspan=1 height=40 width=40>[img]"spacer.gif"[/img]</td>
  </tr>
  <tr>
    <td colspan=3 rowspan=1 height=140 width=140>[img]"spacer.gif"[/img]</td>
  </tr>
</table>

Vanavond even kijken wat Opera hier van bakt...

Intentionally left blank

Pagina: 1