[CSS/IE]Rounded corners schalen niet netjes mee

[Verwijderd]

In mijn website maak in gebruik van Rounded Corners om mijn content te tonen. Dit werkt allemaal prima alleen als er in de content een tabel zit met bijv. twee plaatjes naast elkaar ieder in een eigen cell dan 'loopt' deze tabel uit de Rounded Corners.
Dit heb ik inmiddels opgelost door de width van de main div op auto te zetten. Nu loopt de content er niet meer uit. Maar als ik mijn IE-window verklein, verschuift het naar beneden en komt de rechterkant strak tegen het venster aan.
Dit kan ik ook weer oplossen door margin-right: 20px; toe te voegen, alleen is die waarde 20 afhankelijk van de grootte van mijn venster. Hoe kleiner mijn venster hoe groter de margin.

Ik ben al enkele dagen aan het zoeken naar een oplossing maar ik kom er niet uit. Heeft iemand van jullie een oplossing?

De pagina is te bekijken op: http://www.nwpcs.nl/table.html
De CSS is: http://www.nwpcs.nl/styles/tables.css

Het gaat dus om het gele vlak in het midden. De twee plaatjes onderin zitten in een tabel om ze naast elkaar te krijgen. De content wordt uit een database gehaald.

De relevante code:

HTML:

<div class="content">
    <h1>Welkom bij het Nederlands Welsh Pony en Cob Stamboek<hr /></h1>
    <div class="contentBody">
            De Welsh Mountain Pony wordt al generaties lang gefokt in de bergen en onherbergzame gebieden van Wales. En hoewel hun schoonheid onbetwist is, wil dit niet zeggen dat ze alleen maar een mooi stuk speelgoed zijn.
            <p>Eeuwenlang hebben alleen de sterksten overleefd en dat heeft ze de degelijke gesteldheid, de spijkerharde benen en grote intelligentie gegeven.Dit gecombineerd met het fameuze Welsh karakter, maakt ze tot de ideale kinderpony van vandaag. Maar ook voor volwassenen is het een fantastische pony om aan te spannen, hetzij voor een ontspannend ritje door de omgeving of voor een spannende deelname aan de marathon. Deze all round eigenschappen maken dat de Welsh Mountain Pony wereldwijd gebruikt wordt, zowel &nbsp;gereden en als&nbsp;aangespannen.</p>
            <p>Het hoofd van de Welsh Mountain Pony moet klein zijn, met mooi gevormde spitse oren, grote moedige ogen en een breed voorhoofd. De kaak moet mooi uitgesneden zijn en het moet uitlopen in een smalle snuit, het silhouet van het hoofd mag hol zijn of met een deuk, maar nooit bol of t&eacute; recht. De nek moet lang genoeg zijn en moet mooi gedragen worden met een schuine schouder die duidelijk zichtbaar in de schoft overgaat. De benen moeten vierkant gesteld zijn met goede platte botten en ronde harde voeten. De staart moet hoog ingezet zijn en vrolijk gedragen. De beweging moet, zowel voor als achter recht zijn, vlot en vrij, achter met goede buiging in de spronggewrichten.</p>
<table cellspacing="0" cellpadding="1" width="200" summary="" border="0">
    <tbody>
        <tr>
            <td>[img]"http://www.nwpcs.nl/UserFiles/Image/baldwijna.jpg"[/img]&nbsp;</td>
            <td>&nbsp;[img]"http://www.nwpcs.nl/UserFiles/Image/TWEESPAN.jpg"[/img]</td>
        </tr>
    </tbody>
</table>
    </div>
    <div class="contentFooter"><p></p></div>
</div>

Cascading Stylesheet:

div.content {
    width: auto;
    margin-left: 0px;
    margin-top: 0px;
    background: #fdfd81 url(http://www.nwpcs.nl/images/contentTopLeft.gif) top left no-repeat;
    min-width: 500px;
    margin-bottom: 2em;
    margin-right: 20px;
    position:relative;
    height: 1%; 
} 
div.content h1 {
    width: auto;
    background:  url(http://www.nwpcs.nl/images/contentTopRight.gif) top right no-repeat;
    font-size:1.3em;
    padding:15px;
    padding-left:0;
    margin:0;
    position:relative;
    height: 1%;
    right:-10px;
    text-align: center;
}
div.content h1 hr {     
    color: #003300;
}   
div.contentBody {
    background:  url(http://www.nwpcs.nl/images/contentRight.gif) top right repeat-y;
    width: auto;
    margin:0;
    margin-top:-2em;
    padding:15px;
    padding-left:0;
    position:relative;
    height: 1%;
    right:-10px;
}
div.contentBody a,
div.contentBody a:link,
div.contentBody a:visited,
div.contentBody a:active
{
    color: #000066;
    font:inherit;
    font-weight:bold;
}   
div.contentBody h1 {
    background: none;
}
div.contentBody img {
    padding: 0;
    background: none;
    margin: 0;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 0;
}   
div.contentFooter {
    background:  url(http://www.nwpcs.nl/images/contentBottomLeft.gif) bottom left no-repeat;
    position:relative;
    height: 1%;
    top:11px;
}
div.contentFooter p {
    background:  url(http://www.nwpcs.nl/images/contentBottomRight.gif) bottom right no-repeat;
    padding:15px;
    padding-left:0;
    display:block;
    margin:-2em 0 0 0;
    position:relative;
    height: 1%;
    right:-10px;
    font-size:small;
}
div.contentBody table {
    text-align: left;
    vertical-align: top;
    border-width: 0px;
    border-style: none;
    padding: 3px;
}
div.content h2 {    
    font-size: 1.1em;
    text-align: left;
}

[Michali]

Ik zou eerst eens beginnen met het knippen van je afbeeldingen op de juiste manier. Per hoek, moet je precies datgene hebben dat nodig is en niet meer. Voor de stukken tussen de hoeken kun je een afbeelding van 1px hoog of breed gebruiken, welke dan in de breedte of hoogte gelijk is aan de hoeken waartussen die loopt. Met die afbeeldingen maak je dan je box met rounded corners. Dan ga je met paddings werken, om zo de content naar binnen te drukken, binnen het gebied van je afbeeldingen. Je moet een element alleen padding geven bij het stuk waar hij het plaatje heeft zitten, anders druk je mogelijk een genest element ook weg, wat voor problemen zorgt. Een aantal zaken die je niet nodig hebt: position: relative; height: 1%; Als je daar gebruik van moet maken, dan zit je waarschijnlijk verkeerd. (Bij het maken van zo'n box iig.)