[CSS/IE] Styling fout bij scrollen

[Pantalaimon]

Een vaag probleem, wat zich (vermoedelijk) pas voordoet sinds ik geupgrade heb naar de nieuwste IE. In Firefox overigens geen problemen.

Het probleem is als volgt. In mijn site zit een div, wat dient als main content window. In het kort laat ik daar wat nieuwsberichten zien, en men kan erop reageren. De reacties kunnen weer quote-divs bevatten en die hebben een bepaalde styling meegekregen. Nu is het zo dat als ik door de reacties scroll, en de quote-div staat compleet in beeld, dan is ie alle styling kwijt. Scrollt deze gedeeltelijk uit het zichtbare gedeelte, dan is alle styling gewoon aanwezig. Het gedraagt zich nog vreemder als meerdere quote-divs in beeld staan.

Wazig verhaal ja


Voorbeeldje dan maar. Zo staat de quote-div bijvoorbeeld helemaal in beeld (let niet op de tekst):

Deze wijkt dus niet af met de rest van de styling in het reactie-veld.

Daarna een beetje naar onderen gescrolld. zodat de quote-div maar gedeeltelijk in beeld staat:

Nu zie je de andere achtergrondkleur en lijnen, etc, zoals het hoort.

Zo zit de HTML code eruit (het relevante gedeelte)

HTML:

<div class="box"><div class="content">

<div class="comment">
    <div class="header">[poster - datum - etc]</div>
    <div class="body"><blockquote><span style="font-size: 10px;">quote:</span><div class="quote">[gequote tekst]<div style="clear:both;"></div></div></blockquote>

    [tekst buiten quote]
    <div style="clear:both;"></div></div>
</div>

</div></div>

(Bovenstaande constructie, twee bounding divs (box & content) is een constructie waar ik niet omheen kom, om het zowel in IE als in firefox goed te laten werken. Met conditional comments override ik enkele CSS attributen, waarbij in onderstaande CSS code rekening mee is gehouden.)


En de bijbehorende CSS:

Cascading Stylesheet:

.box { position: static; border: 0px;}

.content {
  position: relative; 
  bottom: 0px; 
  width: 486px;
  height: 257px;
  text-align: left;
  overflow: auto;
  }

.comment {
  color: #302028;
  font-size: 9pt;
  font-weight: normal;
  margin: 0px 25px 0px 25px;
  }

.comment .header {
  background-image: url('img/comment_header.gif');
  background-repeat: no-repeat;
  font-size: 4pt;
  height: 17px;
  }

.comment .body {
  background-color: #d2cce2;
  line-height: 14px;
  text-align: justify;
  padding: 8px 6px 8px 6px;
  border: #625e65 1px solid;
  }

blockquote {
  margin: 0px 35px 0px 35px;
  }

.quote {
  color: #404040;
  background-color: #C3BBD7;
  border-bottom: #EEEEE0 1px solid;
  border-top: #EEEEE0 1px solid;
  }

De volledige gegenereerde HTML validate zonder problemen.

Zie ik nu iets over het hoofd, moet ik weer rare constructies verzinnen om me naar de nukken van weer een nieuwe IE versie te schikken, of zie ik gewoon iets over het hoofd?

Ideeen zijn welkom!

[HyperioN]

Tel ik nou verkeerd of sluit je een div te weinig af?
Check check dubbel check: je sluit je body-classed div niet af.

Gefixed:

HTML:

<div class="box"><div class="content">

<div class="comment">
    <div class="header">
        [poster - datum - etc]
    </div>
    <div class="body">
        <blockquote>
            <span style="font-size: 10px;">quote:</span>
            <div class="quote">
                [gequote tekst]
                <div style="clear:both;"></div>
            </div>
        </blockquote>
        [tekst buiten quote]
        <div style="clear:both;"></div>
    </div>
</div>

</div></div>

Probeer die eens..

[Pantalaimon]

HyperioN. schreef op donderdag 08 februari 2007 @ 00:42:
Tel ik nou verkeerd of sluit je een div te weinig af?
Check check dubbel check: je sluit je body-classed div niet af.

Gefixed:
[..]

Probeer die eens..

Ah, je hebt gelijk, maar das een foutje wat erin is geslopen bij het maken van het topic, in de originele code worden alle tags wel goed afgesloten. Nogmaals, de HTML is voor 100% gevalideerd. (Dat maakt het probleem ook zo vaag...). Toch scherp van je, thnx! Ik pas het ff aan in de OP

[Pantalaimon]

Niemand??

Ik ben de eerste met dit maffe probleem? .

[r0bert]

Misschien je div met clear both eens buiten (onder) het huidige element zetten waar het in zit?

[edit]
Laat maar, loos, werkt niet.

[ Voor 17% gewijzigd door r0bert op 09-02-2007 14:24 ]

[r0bert]

Gevonden, verwijder de position: relative.

[Pantalaimon]

r0bert schreef op vrijdag 09 februari 2007 @ 14:26:
Gevonden, verwijder de position: relative.

Dat werkt idd, maar dan volgt er weer een probleem in IE. In diezelfde content div zit een reactieform, met daaronder een mouse-over, wat een position: absolute div zichtbaar maakt bovenop de form, met daarin wat opties. Als ik dus de position: relative weghaal in de bounding div, dan verschijnt de absolute div binnen IE op de verkeerde plek; de meegegeven marges worden gezien vanaf de browser window ipv de content div window. En de positie van die content div is variabel, dus marges erop afstemmen heeft geen zin...

Die relative constructie was dus weer nodig om een andere IE 'bug' te omzeilen...

[Pantalaimon]

Het is (ongeveer) gelukt intussen. Ik had bij het opzetten van de site de niet-zo-nette oplossing gekozen van de layout in een table, gecentreerd in de browser window. Ik dacht dat het gebruik van divs in table cells geen problemen zouden geven. Blijkbaar wel dus.

Heb nu dezelfde layout opgebouwd uit absolute divs, gecentreerd in het venster met een relative div. Dit bleek op alle fronten een stuk gesmeerder te werken; de rare constuctie van dubbele bounding divs i.c.m. conditional comments voor IE die enkele CSS properties override bleek niet meer nodig. De stijlen van de quote divs worden nu ook in IE goed weergegeven, en de mouse-over div laat ie nu ook iig in IE en Firefox op de juiste positie zien.