@DelTorro, this is neither an Ext bug, nor a javascript problem.
it's an issue with the way FireFox renders <caption> tags.
both IE & FF handle <caption>s differently. FF follows the W3C specs, while IE does not (see [References] section below for more info).
[list]
in IE, <caption> text is displayed at the same size as content.
in FF however, <caption> text is always displayed at the browser's default size.
a reflow (or repaint, or both) of the <caption> element then causes the text within the caption to be displayed at the correct size.
line 654 of your CSS file found @ http://test.webtrash.nl/media/stijl/cupmanager.css contains the following line
table.spelregels { font-size: .7em; }
which somehow prevents FF from reflowing (or repainting, or both) the <caption> when the following rule is processed later on line 656 of cupmanager.css
table.spelregels caption { font-size: 1.4em; }
removing that line allows <caption> text to render the same in both IE and FF.
____________________
[investigation methodology]
i managed to narrow down the issue to the following code taken from your site
(note 1: you should be the one doing this, not me... /:))
(note 2: notice there are no links to any CSS file / Javascript file / image -- it just plain old HTML + CSS)
(note 3: i've also removed unnecessary nested <div>s which did not contribute to the issue)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>Cupmanager 2008 » De spelregels</title>
<style>
/*
#####################
# TABELLEN #
#####################
*/
table.spelregels { font-size: .7em; }/** THIS RULE LEADS TO THE ISSUE YOU REPORTED **/
table.spelregels caption { font-size: 1.4em; }
</style>
</head>
<body>
<div class="container">
<div id="kolom-links">
<div class="content">
<table class="spelregels" id="spelregels-wedstrijd" cellspacing="0" cellpadding="0" summary="Overzicht van spelregels">
<caption>Tabel 1: Puntentelling met betrekking tot teamstatistieken</caption>
<col width="48">
<col width="48">
<col width="48">
<col width="54">
<col width="54">
<col width="54">
<col width="54">
<col width="48">
<col width="48">
<tr>
<th scope="col" title="Doelpunt team">Dlp team</th>
<th scope="col">Gelijk poule</th>
<th scope="col">Winst poule</th>
<th scope="col">Winst<br> 1/4 fin</th>
<th scope="col">Verlies<br> 1/4 fin</th>
<th scope="col">Winst<br> 1/2 fin</th>
<th scope="col">Verlies<br> 1/2 fin</th>
<th scope="col">Winst finale</th>
<th scope="col">Verlies finale</th>
</tr>
<tr class="rij">
<td class="midden groen">1</td>
<td class="midden groen">1</td>
<td class="midden groen">3</td>
<td class="midden groen">4</td>
<td class="midden groen">2</td>
<td class="midden groen">6</td>
<td class="midden groen">3</td>
<td class="midden groen">10</td>
<td class="midden groen">5</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
which can be further simplified to the following test case
<html>
<head>
<title><caption> test</title>
<style>
table.myclass { font-size:0.7em; }/** THIS RULE CAUSES THE ISSUE YOU REPORTED. WHEN REMOVED, CAPTION TEXT DISPLAYS THE SAME IN FF AND IE **/
table.myclass caption { font-size: 1.4em; }
.onepointfourtimes { font-size: 1.4em; }
</style>
<!-- uncomment this chunk to see how the reflow affects
<script src="../fms2/js/ext/adapter/ext/ext-base.js"></script>
<script src="../fms2/js/ext/ext-all-debug.js"></script>
-->
</head>
<body>
<span>This text is displayed at my browser's default font size.</span> <span class="onepointfourtimes">This text is 1.4 times larger than my browser's default font size.</span>
<br/><br/>
<table class="myclass" border="1"><!-- added border for clarity -->
<caption>My Table Caption</caption>
<tr>
<td>My Column 1</td>
<td>My Column 2</td>
</tr>
</table>
</body>
</html>
____________________
I can be even more specific: as soon as the ext-all.js-file is included, the problem occures.
including ext-all.js causes a document reflow (or repaint, or both) when the following code
(line 1782 of ext-all-debug.js in the official Ext 2.0-beta1a download) is executed on document ready
Ext.onReady(function(){
var bd = Ext.getBody();
if(!bd){ return; }
var cls = [
Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : 'ext-ie7')
: Ext.isGecko ? "ext-gecko"
: Ext.isOpera ? "ext-opera"
: Ext.isSafari ? "ext-safari" : ""
];
if(Ext.isMac){
cls.push("ext-mac");
}
if(Ext.isLinux){
cls.push("ext-linux");
}
if(Ext.isBorderBox){
cls.push('ext-border-box');
}
if(Ext.isStrict){
var p = bd.dom.parentNode;
if(p){
p.className += ' ext-strict';
}
}
bd.addClass(cls.join(' ')); // gives the <body> tag a class of ext-gecko/ext-opera/ext-safari, causing a reflow / repaint / both
});
it is this reflow (or repaint, or both) which causes FF to render the text within the <caption> tag at FF's correct size --
in our case, this will be 1.4 times larger than the browser's default font size, which is not the same as the default font-size you've specified
for <table class="spelregels">. IE, on the other hand, (for once) renders [b]<caption>s[b] the way we expect it to.
to fix this browser inconsistency, either specify an absolute font-size for your <caption> text like so
table.spelregels caption { font-size: 20px; }/* SAME RESULT IN BOTH IE / FF */
or remove that CSS rule on line 656 of cupmanager.css
table.spelregels { font-size: .7em; }
and target specific <tr>s / <td>s instead.
____________________
[references]
http://www.thescripts.com/forum/thread557393.html
http://blackwidows.co.uk/blog/?p=124
https://bugzilla.mozilla.org/show_bug.cgi?id=114734%20#comment_text_10
http://www.w3.org/TR/REC-CSS2/tables.html#q5