[CSS] IE7 geeft verkeerde width aan div

[Verwijderd]

Beste tweakers,

Ik ben bezig een site die al een jaartje draait IE7-proof te maken, en dat gaat niet zonder problemen. De site zoals ie nu draait staat op http://www.optivity.us en werkt goed in FireFox en IE6. In IE7 wordt de inhoud van de pagina echter niet weergegeven. Dit lijkt te komen door een stylesheet die de width en height van de pagina op 100% stelt.

In een testje dat ik hier heb gezet heb ik die CSS-waarden weggelaten en is de inhoud van de site ook te zien in IE7. Het logo wordt echter veel te laag gezet, i.p.v. naast de blauwe vorm rechts. Het lijkt erop dat de div-container waarin het logo staat veel te breed is en daarom onder de blauwe vorm rechts wordt gezet.

Zie de screenshots hier:
IE6:


IE7:


De breedtes worden als volgt opgegeven:

Cascading Stylesheet:

.topNav
{
    width: 80%;
    height: 114px;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
}

.rightNav
{
    float: right;
    width: 20%;
    height: 100%;
    border-left: 1px solid #cccccc;
}

Ik heb geprobeerd de percentuele breedtes te vervangen door vaste waarden of zelfs helemaal weg te laten, maar er verandert niets. Is iemand bekend met dit gedrag van IE7 en weet iemand wat ik hieraan kan doen? Bedankt.

[Cascade]

uch. Heb geen mooie oplossing voor het specifieke IE7 probleem, maar ik zou de site eerst omzetten naar een standaard 3 column met middelste liquid in CSS en heel snel dat ranzige javascript voor het resizen eruit slopen...

[Verwijderd]

Bedankt voor je antwoord, maar da's een hoop werk. En het probleem lijkt sowieso niet in de JavaScript te zitten; die zorgt op zich alleen maar voor het resizen van het middelste gedeelte. De rest van de layout wordt door CSS verzorgd.

[JJvG]

Er zijn verschillen in het box-model tussen IE6 en IE7. Heb hier zelf ook de nodige problemen mee (en gehad). Het probleem ontstaat doordat IE6 de borders, padding en margin apart meetelt in de box. Wanneer je een width pakt van 19% ipv 20% (totale breedte "normaal" is dan 99%), zal het waarschijnlijk al beter gaan.

Wat ook helpt met debuggen is om een dikke border om je divs te zetten, dan kun je zien wat elkaar in de weg zit.

[crisp]

JJvG schreef op donderdag 01 februari 2007 @ 15:07:
Er zijn verschillen in het box-model tussen IE6 en IE7.

Nee, zowel IE6 als IE7 renderen in standards-compliant mode (en gebruiken dus het w3c boxmodel) als je een volledige DTD gebruikt, en gebruiken beiden hun propriety box-model in quirksmode.

Het enige verschil is dat IE7 niet meer in quirksmode springt als je een XML-declaration voor de DTD gebruikt.