CSS richtig, aber Darstellung falsch?

[socke]

Haaaallo.
ich hab mich jetzt auch mal an CSS gewagt und hab erstaunlicherweise auch gleich was recht nettes hinbekommen, steh nun aber vor nem Problem, bei dem ich nicht mehr ganz den Durchblick hab:
Ich hab in meinem Layout nen iframe von 500x350 px Größe.
In dem Frame befindet sich eine Tabelle mit 2 Spalten und 2 Reihen, also 4 Zellen.
Am besten die testseite mal hier angucken.

Ich glaub mein Problem kann man auf Anhieb erkennen...
Ich hätte den Inhalt ganz gern ohne horizontales Scrollen in dem Fenster untergebracht, aber egal welche Formatierung ich der Tabelle verpasse, es ändert sich nichts! Auch schmäler machen, also von 500px auf 400px hab ich schon probiert. Bin grad n bissl aufgeschmissen, weil ich keine Ahnung hab wo der Fehler liegt.

Könntet ihr euch bitte mal die CSS anschauen? Und sagt mir bitte nicht, dass FF und IE den Code einfach nur falsch interpretieren...

Bin dankbar für jeden Hinweis!

Viele Grüße, socke

body {    
    background-color: Black;
    font: "Georgia"
}    

.table {
    /* Grundformatierung für Inhalts-Tabelle */
    width: 500px;
    height: 350px;
    padding: 0px;
    background-color: transparent;
    font-family: serif;
    font-size: 10pt;
    color: #F5DEB3;
}

.icon {                                /* Zelle 1: Navigations-Grafik */
    width: 20px;
    height: 20px;
}

.navigation {                        /* Zelle 2: Navigationsleiste mit Links*/
    width: 500px;
    height: 20px;
    padding-left:15px;
    text-align: left;
    border-bottom: 1px;
    border-bottom-color: #F5DEB3;
    border-bottom-style: ridge;
}

                                        /* Zelle 3: Einzug am linken Rand (unter Icon) wird über leere Zelle "<td> </td>" eingefügt */ 
.main {                                /* Zelle 4: Textbereich */
    padding: 15px;
    vertical-align: top;
}    

a:link {                                /* Standard-Formatierung für Links */
    text-decoration: none;
    color: #F5DEB3;
}

a:visited {                        /* bereits besuchte Links */
    text-decoration: none;
    color: #F5DEB3;        
}

a:hover {                        /* beim Überfahren mit der Maus */                    
    text-decoration: underline;
    color: #F5DEB3;
}

p:firstletter {                /* Initiale eines Absatzes..funzt wohl irgendwie nicht */
    color: #F5DEB3;
    font-size: 160%;
}


.picleft {                        /* Grafik Links vom Text */
    float: left;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.picright {                        /* Grafik rechts vom Text */
    float: right;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px; 
}

[vektorpixel]

Probier mal mit einem richtigen Text (mit Leerzeichen drin) und sag dann ob's geht.

Ach ja und .navigation in der CSS Datei darf nicht 500px sein. Sondern nur 480 (500-20)

[socke]

danke, lag wirklich am text! und wies aussieht war um die tabelle rum automatisch immer ein ca. 15px-breiter rahmen, ohne dass der irgendwo angegeben war?! hab die tabelle dann einfach noch entsprechend in der breite verkürzt bis der horizontale scroller weg war.

danke nochmal!! =)

...könnt dann dichtmachen hier