Ik heb een probleem dat Firefox (1.5) mijn tabel verkeert rendeert ten opzichte van zijn omliggende elementen. Ik heb het kunnen reproduceren met onderstaande versimpelde code:
Het resultaat zou er zo uit moeten zien (dit gebeurd ook in IE):

In Firefox ziet het er echter zo uit:

De tabel is dus aan de linker kant 1 pixel breder dan de rest.
Als ik de border-collapse van de tabel verwijder en er een gewone border voor in de plaats zet komt de pixel verschil niet voor. Ook als ik de doctype verwijder ziet het er goed uit. Beide zijn natuurlijk geen optie. Zowel de HTML als de CSS zijn valid.
Iemand enig idee?
HTML:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS test</title> <style type="text/css"> div#container { width: 100px; } div#top, div#bottom { border-left: 1px solid black; border-right: 1px solid black; } table#main { width: 100%; border-collapse: collapse; } table#main td { border: 1px solid black; } </style> </head> <body> <div id="container"> <div id="top">top</div> <table id="main"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table> <div id="bottom">bottom</div> </div> </body> </html> |
Het resultaat zou er zo uit moeten zien (dit gebeurd ook in IE):

In Firefox ziet het er echter zo uit:

De tabel is dus aan de linker kant 1 pixel breder dan de rest.
Als ik de border-collapse van de tabel verwijder en er een gewone border voor in de plaats zet komt de pixel verschil niet voor. Ook als ik de doctype verwijder ziet het er goed uit. Beide zijn natuurlijk geen optie. Zowel de HTML als de CSS zijn valid.
Iemand enig idee?
Pierre - Motormedia.nl - Motor-Forum.nl - Motorshopper.nl - Motormeuk.nl - Motorstek.nl