Problems with <pre> tag and CSS in Firefox 3.0

On the following website:

http://www.dizzymonkeydesign.com/blog/misc/adding-and-customizing-dlgs-in-wix-3/

I use <pre> blocks to display source code.  These blocks are wrapped in <div>s that have various styles set.  The intention is that the block of code will size with the browser window, but the lines of code in the block will not wrap.  "overflow-x: auto;" is set so that a horizontal scrollbar will appear when the code block becomes narrower than the code.

The problem is that with Firefox 3, these code blocks will no longer size smaller than the longest line of code.  This keeps the rest of the page from sizing correctly, causing the web page content to fall off the right side of the page.

I don't claim to be any kind of expert with css or HTML, so some of what you see may be horribly hacked together.  But it currently works with IE and previous versions of Firefox, but I can't seem to get it working with FF 3.

Any help would be greatly appreciated.  Thanks!

More info...

The <div> that wraps the <pre> content is defined as:
.srccode
{
    font-family: courier new, courier;
      position: relative;
      margin-left: auto;
      margin-right: auto;      
    width:98%;
    background-color: #f4f4f4;
    line-height: 1.1em;
    font-size: 1.0em;
    overflow-x: auto;
}

The content of the page is contained in the center column of a three column table, and the table is defined with the following styles:
table
{
    margin: 100px 0px 0px 0px;
    .margin-top: 120px; /* IE 6 & 7 hack */
    table-layout: fixed;
}
Start Free Trial