[CSS] Elementen verdwijnen in IE6 met position:relative

[Verwijderd]

Dit is voor zover ik weet niet de Peekaboo-bug, aangezien er niets "peekabood": zowel scrollen, herladen als venster minimaliseren en restoren zorgt er niet voor dat de elementen weer zichtbaar worden. Het is moeilijk Googlen hierop, maar als iemand dit een bekende bug lijkt hoor ik het graag.

Het gaat om een paar divs die in IE6 niet getoond worden (geen problemen in Firefox en IE7), en wie weet waarom mag het zeggen De ruimte voor de divs wordt wel gereserveerd (scrollbars voor de lege ruimte) en als je ctrl+A doet zie je ook dat de divs geselecteerd worden. Maar geen inhoud en geen achtergrondplaatje dus (en geen achtergrondkleur als ik dat probeer).

De divs hebben als CSS:

Cascading Stylesheet:

div.game_teaser {
    width: 293px;
    position: relative;
    overflow: hidden;
    background: url(plaatje.gif) no-repeat;
}

Wanneer ik de position weghaal werken ze wel, maar dan krijg ik problemen met de absoluut gepositioneerde elementen die binnen de div staan.

De elementen die niet getoond worden staan binnen een div met "float: left", maar die float weghalen of de position hiervan aanpassen heeft ook geen resultaat. Na deze parent staat een "<br style="clear: both" />" (onder/buiten de parent dus) om de float te clearen, maar deze weghalen heeft ook geen resultaat.

[Verwijderd]

Subtiele kick en meteen de melding dat een height toevoegen aan welk element dan ook (wil voor de Peekaboo-bug nog weleens helpen) geen effect heeft.

[Verwijderd]

Staat er wel content in? Wat gebeurt er als je expliciet een width opgeeft?

[Verwijderd]

Verwijderd schreef op woensdag 18 april 2007 @ 11:51:
Staat er wel content in? Wat gebeurt er als je expliciet een width opgeeft?

Er is expliciet een width opgegeven (zie startpost). Ook de parent heeft een width. Er staat content in, zowel absoluut gepositioneerd als in de flow.

[crisp]

het moet toch een hasLayout bug zijn, maar zonder concreet voorbeeld kan ik daar niets over zeggen...

[Verwijderd]

Mocht ik het niet op kunnen lossen op korte termijn, dan zet ik een testcase online. Het is voor een website van een klant dus ik kan het niet zomaar online gooien.

[Sappie]

Ondanks dat het voor een website van een klant is, zou je toch een gecensureerde versie online kunnen gooien (met bijvoorbeeld fictieve namen voor id's / classes). Ik kan mbv jouw topicstart helaas het probleem dat je omschrijft niet reproduceren, dus kan ik ook geen eventuele oplossing aandragen.

offtopic:
Voor het clearen van de float heb je geen apart element nodig; je kunt daartoe op het parent element ook een hoogte en een overflow sprecificeren. Op de volgende website wordt het uitgelegd: http://annevankesteren.nl/2005/03/clearing-floats

[Tommy The Cat]

Dit oude topic sluit vrijwel naadloos aan op mijn vraag.

<weggeknipt> zie verder

[ Voor 104% gewijzigd door Tommy The Cat op 30-04-2008 13:36 ]

[Verwijderd]

#navigatieDiv verdwijnt? Probeer dit eens:

Cascading Stylesheet:

#navigatieDiv {
    width: 100%;
}

[Tommy The Cat]

Verwijderd schreef op dinsdag 29 april 2008 @ 23:03:
#navigatieDiv verdwijnt? Probeer dit eens:

Cascading Stylesheet:

#navigatieDiv {
    width: 100%;
}

<weggeknipt> zie onder

[ Voor 76% gewijzigd door Tommy The Cat op 30-04-2008 14:01 ]

[Tommy The Cat]

Samenvatting probleem: in IE6 blijft een div element onderin hangen. Ik dacht eerst dat deze volledig weg was maar dat is dus niet zo. Vandaar dat deze vraag nu minder aansluit op dit topic. Desalniettemin zal ik mijn vraag hier toch doorzetten.

Zojuist heb ik via deze handige link o.a. IE6 voor een andere machine met xp geinstalleerd naast browsers als FF, opera en safari voor vista zodat ik nu zelf rustig en altijd kan kijken hoe m'n website er in andere browsers uit ziet.

CraZaay, ik ben dus even met jouw navigatieDiv width = 100% aan de gang geweest. Hier nog even de oorspronkelijke (en nu juiste) code:

[code=html]
<div id="navigatieDiv">
<div id="linksDiv"><a href="index.html">SCHILDERIJEN</a><a href="beaottink.html">BEA OTTINK</a><a href="index.html">KUNSTMARKTEN</a><a href="index.html">CONTACT</a></div>
</div>
[/code=html]

[code=css]
#navigatieDiv {
height: 515px;
width: 110px;
background-color: #333333;
padding-top: 100px;
}
[/code=css]

De navigatieDiv is ondergebracht in een containerDiv, heeft oorspronkelijk geen positioning eigenschappen meegekregen en is de parent div voor een child div dat linkjes bevat, zoals je in de html code hierboven kunt zien. Alle andere parent divs in de containerDiv hebben de eigenschap float right meegekregen en staan in de code allemaal voor de navigatieDiv zodat de navigatieDiv als vanzelf linksbovenin moet komen te staan zonder dat het de float right div elementen naar beneden drukt. Dat gebeurt ook, behalve in IE6. Width 100% resulteert erin dat nu ook in IE7 de navigatieDiv ergens onderin blijft hangen. Als ik vervolgens een float left erbij toepas gaat het zelfs ook mis in de laatste versie van Opera. De width 100% doet dus weinig goeds . Ik denk dat dat laatste ook logisch is omdat de float left (zover mijn beginners/amateurkennis klopt) betekent dat het net zoals de andere div elementen in de containerDiv uit de normal document flow komt en zich dus gaat bemoeien met de document flow van alle andere float elementen, terwijl de navigatieDiv 100% betekent dat het net zo breed wordt als de containerDiv waar al die float right divjes ook in staan.

Nog andere ideeen?

Concept website. De links aan de linkerkant van het zwarte midden staan dus in de linksDiv welke is ondergebracht in de navigatieDiv waar we het hier over hebben.

[ Voor 9% gewijzigd door Tommy The Cat op 30-04-2008 14:23 ]